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.