Primitives
Avatar
Three sizes (sm 24, default 32, lg 44). Optional accent fill for the active user. AvatarStack overlaps with --bg border + 'more' count.
installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json
Preview
BRJKAMS
BRJKMS+12
import { Avatar, AvatarStack } from "@/components/br/primitives";
<Avatar fallback="JK" />
<Avatar fallback="BR" accent /> // active user
<Avatar size="sm" src="/photos/br.jpg" alt="BR" />
<AvatarStack
avatars={[{ fallback: "BR", accent: true }, { fallback: "JK" }, { fallback: "MS" }]}
more={12}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "lg" | default 32px | sm=24px, lg=44px. |
| accent | boolean | — | Fills with accent (active state). |
| src / alt | string | — | Image, takes precedence over fallback. |
| fallback | ReactNode | — | Initials when src missing. |