How do I install the avatar?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Can I stack several avatars?

Yes. The stacked group overlaps avatars and fans them out on hover.

Avatar

Q: What if there is no image?

It falls back to initials on soft radial-gradient profile orbs.

A stack of overlapping avatars with a staggered entrance animation and a fan-out hover effect. Falls back to initials on soft radial-gradient profile orbs when no image is set.

pnpm dlx shadcn@latest add @ditherui/avatar-stack

Install

$ pnpm dlx shadcn@latest add @ditherui/avatar-stack

Props

PropTypeDefault

itemsAvatarStackItem[]—

maxnumber3

classNamestring—

When to use the avatar

Use avatars to show people or owners, alone or stacked. The stack enters with a stagger and fans out on hover.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

SelectAn animated select menu with a sliding active highlight.
Accept terms
CheckboxCheckboxes whose tick draws itself in.
monthly yearly
Radio GroupRadio options with a shared sliding selection.