# Avatar > A round profile photo that falls back to initials in one of eight soft tints, picked from the name. - Name: `avatar` - Status: beta - Categories: people, display - File: the install writes `avatar.tsx` to your `ui` alias, `@/components/ui` by default. - npm packages: `class-variance-authority`. The install adds them. - Other registry items: `@arbokui/dither`. The install adds them. - Gallery: https://arbokui.com/components/avatar - Registry item: https://arbokui.com/r/avatar.json ## Install 1. Add the registry to `components.json`. Do this first, once: ```bash npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json" ``` The command writes this entry. You can also add it by hand: ```json { "registries": { "@arbokui": "https://arbokui.com/r/{name}.json" } } ``` Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control. 2. Add the theme once per app. It replaces your color tokens with ones checked for contrast: ```bash npx shadcn@latest add @arbokui/theme ``` 3. Add the component: ```bash npx shadcn@latest add @arbokui/avatar ``` ## Use it for - Showing who someone is, next to their name: in rows, tables, comments, and cards. - A team or company, with solid set to its own color. - Pass the full name. It names the avatar for screen readers, and it picks the initials and the tint. - Use Person when the name shows beside the avatar. It hides the avatar from screen readers, so the name is read once. ## Avoid it for - A face with no name anywhere near it. A person's name always has their avatar beside it, and the other way round. - Many overlapping faces for a count, like who is going. Use AvatarStack. - A logo or an icon that is not a person or a team. Use the image or the icon itself. - Setting tint to say something, like red for a problem. Tints only tell people apart. - A light solid color, like white or pale yellow. The initials are near white, so they would not show. Use the photo or logo as src. ## Props - `name`: `string`. Required. The full name. It names the avatar and gives the initials and the tint. - `src`: `string`. Photo URL. The initials show until it loads, and stay if it fails. The photo fades in. - `size`: `"sm" | "md" | "lg"`. Default `"md"`. 21, 28, or 36px at the default density. Density scales it. - `tint`: `number`. 0 to 7. Picks a tint instead of the one the name gives. The same name always gets the same tint. - `solid`: `string`. A team's own color, as any CSS color, behind light initials. A thin ring keeps a black or white color off the page. - `initials`: `1 | 2`. Default `2`. How many letters show. Use 1 where faces overlap. - `texture`: `"flat" | "dither" | "gradient" | "grain"`. dither draws the photo as dots over its tint, gradient fades it from the top, and grain speckles it. Initials stay flat. Hover fills gradient and grain in. Left out, the avatar follows the Texture around it. - `className`: `string`. Extra classes. Later classes win, so className='size-16' makes it bigger. ## Accessibility - Renders a \ named by name, so screen readers read the name once and skip the letters. - The photo has an empty alt, since the avatar's own name already says who it is. - When the name shows next to the avatar, pass aria-hidden, or use Person, which does it for you. - The first five tints are the tones' soft pairs, held to 4.5:1 by the theme tests. The other three mix a chart color into the card, and avatar.test.tsx holds their initials to 4.5:1 in light and dark. - A solid color comes from your app, so its contrast is yours to check. The initials use the near-white text color of the solid tones. ## Examples ### With initials ```tsx ``` ### With a photo ```tsx ``` ### A grain photo that clears on hover ```tsx ``` ### A solid brand color ```tsx ``` ### Beside a name ```tsx Josh Tait ```