Avatar
FREEColored initials fallback, sizes, a status dot and AvatarGroup with +N.
Installation
Terminal
npx @bloxa/cli add avatar
# or: npx shadcn@latest add @bloxa/avatarPackages installed automatically: radix-ui
Examples
Sizes, status, group
+2
API reference
Every component also accepts the props of the element it renders.
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Photo. |
| name | string | — | Alt text, initials and color. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size. |
| shape | "circle" | "square" | "circle" | Shape. |
| status | "online" | "away" | "busy" | "offline" | — | Status dot. |
AvatarGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | 4 | Shown at most; the rest become +N. |
| size | string | "md" | Size for every avatar. |