All components
Avatar
User portraits with image and initials fallback, rounded or circular, from 2xs to 2xl.
EW
Variants
EW
subtleEW
solidEW
outlineSizes
EW
xsEW
smEW
mdEW
lgEW
xlInstall
zsh — avatar
1bunx stylexblocks add avatarUsage — Ark UI
avatar.tsx
123456789101112import { Avatar } from "#components/ui/ark-ui/avatar.tsx";
export function Example() { return ( // Ark's avatar machine wears the recipe: image load/error state drives // the fallback, while variant/size/shape resolve once on Root <Avatar.Root variant="subtle" size="md" shape="full"> <Avatar.Fallback>EW</Avatar.Fallback> <Avatar.Image src="/avatar.png" alt="Eelco Wiersma" /> </Avatar.Root> );}