Avatar
Image avatar with graceful initials fallback (stable colour per name), status dot, two shapes and an overlapping group with +N.
2 files · 91 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/avatar.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs avatarUsage
import { Avatar, AvatarGroup } from "@/components/opus/ui/avatar";
<Avatar src={user.image} name={user.name} status="online" />
<AvatarGroup max={3}>{team.map((u) => <Avatar key={u.id} name={u.name} />)}</AvatarGroup>API
| Prop | Type | Default | Description |
|---|---|---|---|
| src / name / alt | string | — | Image, and the name used for initials + colour. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Diameter. |
| shape | "circle" | "square" | "circle" | Mask shape. |
| status | "online" | "away" | "busy" | "offline" | — | Presence dot. |
| AvatarGroup.max | number | 4 | Visible before +N. |