Avatar
A person is a ring and their initial, in italic, since a name is theirs; or a monogram of both initials; or the given name set to fill one width.
Report an issue with AvatarExample
Ring
AJMAJM+3
Monogram
ALWWJBMOTR
FitAdaJonasWolfgangMiraand 2 more
RestA
HereA
GroupAJM
Group, pointed atAJM
MonogramJB
Monogram, hereJB
Monogram, pointed atJB
Fit, a short nameAda
Fit, a long name, hereWolfgang
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.
npx shadcn@latest add https://Usage
import { Avatar, AvatarGroup } from "@/components/ui/avatar"export default function Example() {return (<div className="grid w-full grid-cols-[minmax(0,1fr)] justify-items-start gap-12"><div className="grid justify-items-start gap-3"><span className="ot-label">Ring</span><div className="flex flex-wrap items-center gap-10"><Avatar size="s" alt="Ada Lindqvist" /><Avatar alt="Jonas Berg" here /><Avatar size="l" alt="Mira Okafor" /><AvatarGroup aria-label="Six people on Halden"><Avatar alt="Ada Lindqvist" /><Avatar alt="Jonas Berg" /><Avatar alt="Mira Okafor" /><Avatar alt="and 3 more" fallback="+3" count /></AvatarGroup></div></div><div className="grid justify-items-start gap-3"><span className="ot-label">Monogram</span><div className="flex flex-wrap items-center gap-10"><Avatar variant="monogram" size="l" alt="Ada Lindqvist" here /><Avatar variant="monogram" size="l" alt="Wolfgang Weingart" /><AvatarGroup aria-label="Three people on Tidewater"><Avatar variant="monogram" alt="Jonas Berg" /><Avatar variant="monogram" alt="Mira Okafor" /><Avatar variant="monogram" alt="Tove Rask" /></AvatarGroup></div></div><div className="grid justify-items-start gap-3"><span className="ot-label">Fit</span><AvatarGroup aria-label="Five people in the studio today"><Avatar variant="fit" size="l" alt="Ada Lindqvist" here /><Avatar variant="fit" size="l" alt="Jonas Berg" /><Avatar variant="fit" size="l" alt="Wolfgang Weingart" /><Avatar variant="fit" size="l" alt="Mira Okafor" /><Avatar variant="fit" size="l" alt="and 2 more" fallback="and 2 more" count /></AvatarGroup></div></div>)}Contract
- Underneath: native.
- Anatomy:
<span class="ot-avatar" role="img" aria-label="Name">holding an initial;data-size="s | l",data-herefor presence. A group is<span class="ot-avatars" role="group">, ending in an optionaldata-countavatar ("+3"). - A person is a ring and their initial, in italic, since a name is theirs. Someone here carries the accent dot. A group overlaps, and steps apart when pointed at.
varianton the avatar (data-variant):ring(the default),monogramorfit. Both drop the ring: the type is the whole mark. Each carriesdir="auto", so its letters follow the name's own script, not the page's.- monogram: "It has to be design." The given initial in the large italic (
opsz12, so its hairlines hold) printed over the family initial in a heavy narrow roman (800, width 62%), cut out of it by a paper outline (paint-order: stroke fill), as "has" crosses "It". Here now, the italic takes the accent, as "design." does, and there is no dot. Pointed at, the italic steps off the roman toward the start (spiccato) so both letters read. A group of monograms stands side by side instead of overlapping. One name gives one letter. - fit: "Less is more.", big type set to its measure. The given name alone (or
fallback), measured in its own face on a canvas and set to fill one width (1.8 times the avatar's size), capped at 1.1 times the size, so "Ada" stands large and "Wolfgang" small. It re-measures when the pair changes; until measured it shows at half the size. Pending font measurements stop when the avatar is released; a failed font load keeps the fallback size. Here now hangs an accent full stop outside the measure, as hanging punctuation does. A group stacks fitted names between hairlines, a count last in small voice.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
alt | string | The person's name. It names the avatar for assistive tech. | |
src | string | A photograph, set in greyscale. Without one, the initial shows. | |
fallback | string | What shows without an image. Defaults to the first letter of alt; for fit, the first word. | |
variant | "ring" | "monogram" | "fit" | "ring" | ring: a ring and the initial. monogram: the given initial in italic printed over the family initial in a heavy narrow roman, cut out of it in paper; here now, the italic takes the accent; pointed at, the italic steps off the roman. fit: the given name alone, measured in its own face and set to fill one width, so a short name stands large and a long one small; here now hangs an accent full stop. A group of monograms stands side by side, and fitted names stack between hairlines. |
size | "s" | "m" | "l" | "m" | Small, medium or large. |
here | boolean | false | The accent dot: this person is here now. |
count | boolean | false | The overflow count at the end of a group, such as +3, set in the voice. |
AvatarGroup | span props | Overlaps its avatars; they step apart when pointed at. Give it an aria-label naming the group. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Avatar | "28 December" dots | A ring, an initial, the presence dot |
| Monogram avatar | "It has to be design."; the stationer's monogram | The given initial in italic cut over the family initial in heavy roman; here, the italic is the accent |
| Fit avatar | "Less is more."; type set to its measure | The given name set to fill one width; a group stacks between hairlines |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Avatar | Spiccato | A group steps apart to be counted |
| Monogram avatar | Spiccato | Pointed at, the italic steps off the roman and rebounds into place |