Avatar

Profile image with initials fallback, status light and stacked groups.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/avatar.json

import { Avatar } from "@/components/ui/avatar"

<Avatar src="/maya.jpg" alt="Maya Okafor" status="online" />

AvatarGroup overlaps its children and folds the rest into a +N chip.

Maya, Daniel and 5 others are editing

Square suits workspaces and organisations.

ring marks the active person. color tints the initials and the ring.

Lena

Tom

Sofia

Noah

Guests get their own color

Renders a span and accepts every native span attribute.

Prop	Type	Default
`alt`	`string` The person's name. Read by screen readers and used for the initials. Pass "" when decorative.	`—`
`src`	`string` Image URL. Fades in once loaded.	`—`
`fallback`	`ReactNode` Replaces the initials, for example with an icon.	`—`
`size`	`"sm" \| "md" \| "lg" \| "xl"` 28, 36, 48 or 64px.	`"md"`
`shape`	`"circle" \| "square"` Outline shape.	`"circle"`
`status`	`"online" \| "away" \| "busy" \| "offline"` Status light in the bottom-right corner.	`—`
`ring`	`boolean` Neon ring with a glow, set off by a thin dark gap.	`false`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	`inherited`

Renders a div. Size and shape apply to every Avatar inside.

Prop	Type	Default
`max`	`number` Avatars past this count collapse into a +N chip.	`—`
`size`	`"sm" \| "md" \| "lg" \| "xl"` Size of every avatar and the chip.	`"md"`
`shape`	`"circle" \| "square"` Shape of every avatar and the chip.	`"circle"`
`color`	`NeonColor` Color for every avatar in the group.	`inherited`

Each avatar is a single image to assistive tech, named by alt, with the status appended, e.g. "Maya Okafor (online)".
The +N chip is announced as "N more".
The status light is cut out with #05060a; change it with className if your surface is a different color.