Avatar
primitiveImage with fallback initials, deterministic gradient, status dot, and a group with overflow.
AMAMAMAMAM
Installation
$pnpm dlx disenio add avatarUsage
example.tsx
import { Avatar, AvatarGroup } from "@/components/ui/avatar";Status
ABCD
Group
ABC+2
API
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL. |
| name | string | — | Used to derive initials and fake gradient seed. |
| fallback | string | — | Override the auto-derived initials. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Box size. |
| status | "online" | "away" | "busy" | "offline" | — | Indicator dot in the corner. |
| fake | boolean | false | Use a deterministic gradient background instead of paper. |