Loading example…
Colored initials avatar. 25 AA-contrast background colors picked by hashing a seed; works for Latin and Amharic names.
pnpm dlx shadcn@latest add @gdop-ui/user-avatarimport { UserAvatar } from "@/components/gdop-ui/user-avatar";
export function Example() {
return <UserAvatar name="Abebe Kebede" colorSeed="abebe.kebede@example.gov" />;
}The color is chosen by hashing the seed modulo the palette length. Adding or reordering colors changes which color each person gets.
Initials on a color picked from `colorSeed`. Pass the email as colorSeed so a person keeps one color across every screen.
A group of avatars with a badge for additional members.
Initials are the first letter of the first and second word. Extra spaces are ignored and an empty name falls back to '?'.
| Name | Type | Default | Description |
|---|---|---|---|
name* | string | - | Full name. Used for the initials and as the accessible label. |
colorSeed* | string | - | Text hashed to choose the background color. The same seed always gives the same color. |
size | "sm" | "default" | "lg" | "default" | Avatar size: 24, 32 or 40px. |
className | string | - | Applied to the Avatar root. Use it for custom sizes, e.g. size-12 text-lg. |
...props | Avatar props | - | Everything the shadcn Avatar accepts, including ref. |
| Name | Type | Default | Description |
|---|---|---|---|
getInitials(name) | string | - | First letter of the first and second word (person name and father name). Returns ? for an empty name. |