All components
Avatar
User portraits with image and initials fallback, rounded or circular, from 2xs to 2xl.
EW
Variants
EWsubtle
EWsolid
EWoutline
Sizes
EWxs
EWsm
EWmd
EWlg
EWxl
Install
zsh — avatar
1bunx stylexblocks add avatarUsage — Base UI
avatar.tsx
123456789101112import { Avatar } from "#components/ui/base-ui/avatar.tsx";
export function Example() { return ( // Base UI'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.Image src="/avatar.png" alt="Eelco Wiersma" /> <Avatar.Fallback>EW</Avatar.Fallback> </Avatar.Root> );}