Components
Avatar
Monograms at three sizes, and a group that caps rather than sprawls.
RSAKMO
RSAKMOPS+1Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/avatar.jsonSizes
sm is 20px, not 16. At 16 a two-letter monogram clipped — the initials were
wider than the disc — which is the kind of defect that only shows up once real
names are in the data.
Groups cap at four
AvatarGroup shows at most four faces and puts the remainder in a +n disc. A
fifth face buys nothing; the count is more useful than another initial.
| Prop | Type | Default | Description |
|---|---|---|---|
| initials | string | — | Sliced to two characters and upper-cased. |
| size | "sm" | "md" | "lg" | "md" | 20, 28 and 40px. |
| people | string[] | — | AvatarGroup only. |
| max | number | 4 | AvatarGroup only. Beyond this the count takes over. |