Avatar
A round picture of a colleague or an agent. With no photo it shows one of six Waimakers characters or a two-letter monogram, and it always has a name for screen readers.
bunx --bun shadcn@4.17.0 add @waimakers/avatar- npm dependencies
- @base-ui/react@1.9.0class-variance-authority@0.7.1
From the registry
The shadcn Avatar on Base UI, not Radix, without the badge and group parts. Adds what the stock avatar leaves to the caller: a deterministic two-letter monogram on a brand-role fill picked by the name, the kit's six illustrated characters (SVG files that ship with the item, referenced by key), token-based sizes sm/md/lg/xl, and one accessibility contract: decorative when a visible name sits beside it so a screen reader hears the name once, otherwise role=img with the name.
Examples
Sizes
Small for dense rows, medium by default, large for headers and extra large for a profile.
Characters
Six characters for agents and people without a photo. The label adds the character's name.
- Amber owl
- Blue fox
- Green turtle
- Orange tiger
- Purple octopus
- Red panda
Monograms
No photo and no character: two letters on a fill chosen from the name, so the same name always gets the same fill.
Fallback
When a photo fails to load, the monogram takes its place.
Decorative
Next to a visible name, mark the avatar decorative so the name is not read twice.
- AnnaOwner
- PaulCollaborator
- JoostCollaborator