Avatar

An image element with a fallback for representing a user, and a group that stacks several.

$ pnpm dlx shadcn@latest add https://dashral.com/r/avatar.json

OMOMOMOMOM

LJBSAC

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/avatar.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/avatar

Usage

example.tsx

1import { Avatar, AvatarGroup } from "@/components/dashral/avatar"
2
3<>
4  <Avatar src="/avatars/olivia.jpg" name="Olivia Martin" status="online" />
5  <AvatarGroup
6    items={[{ name: "Olivia Martin" }, { name: "Jackson Lee" }, { name: "Ayu Lestari" }]}
7    max={2}
8    aria-label="3 people on this project"
9  />
10</>

Examples

Group

AvatarGroup takes items, overlaps them and collapses the rest into +N; showNames puts each name in a tooltip.

OMLJSDBS+3

Team members

A list with status dots; alt="" because the name is written beside each avatar.

Olivia Martin
olivia@acme.com
Owner
Liam Johnson
liam@acme.com
Admin
Budi Santoso
budi@acme.com
Member
Sofia Davis
sofia@acme.com
Member

Account menu

The avatar as the header's account button, opening a DropdownMenu.

Acme Inc.

Assignees on a task

A small AvatarGroup in a card's footer, with names on hover.

High priority

Redesign the onboarding flow

Fewer steps from sign-up to the first dashboard, with a checklist that remembers progress.

OMLJSD+2

12 Oct 24

API reference

Avatar

Also takes every prop of Radix Avatar(opens in a new tab).

Prop	Type	Default
`src`	`string` The photo.	—
`name`	`string` Who it is: the alt text, and the initials shown while the photo loads or without one.	—
`alt`	`string` The image's alt text; "" when the name is written beside it.	`name`
`fallback`	`ReactNode` Replaces the initials, e.g. an icon.	`the initials`
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"` 24, 28, 32, 40 or 64px.	`"md"`
`shape`	`"circle" \| "square"`	`"circle"`
`status`	`"online" \| "away" \| "busy" \| "offline"` A dot in the corner, read out too.	—
`classNames`	`{ image, fallback, status }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

AvatarGroup

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`items`	`{ src?, name?, fallback?, id? }[]` The people. Required.	—
`max`	`number` Avatars shown before the rest collapse into “+N”.	—
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`showNames`	`boolean` Each avatar shows its name in a tooltip, and “+N” lists the rest.	`false`
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

name is the photo's alt text; without a photo the name is still read out.
AvatarGroup is role="group": label it, e.g. aria-label="7 people on this project".
With showNames, each avatar and “+N” can be reached with Tab, and the tooltip shows on focus too.