Ravox KitBasics
Avatar
A person's photo with initials as a fallback while it loads or if it fails, in four sizes, round or square, with a status dot. The group stacks avatars and sums up the rest as +N.
Settings
Examples
Sizes
Group with +N
+8Team status
- Marina DuarteSuporte · online
- Caio LimaFinanceiro · busy
- Beatriz NogueiraLogística · away
- Rafael CoutoVendas · offline
Company and project
Photo that failed
A foto não carregou: ficam as iniciais.Installation
The command creates components/ui/avatar.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add avatarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Required. Becomes the name read by screen readers and the initials ("Ana Paula Souza" → AS). |
| src | string | — | Photo URL. Fades in when loaded; if it fails, the initials stay. |
| size | "xs" | "sm" | "md" | "lg" | "md" | 24, 32, 40 or 56px. Inside the group, it inherits the group's size. |
| shape | "circle" | "square" | "circle" | Square with rounded corners for companies, teams and projects. |
| color | "auto" | "pink" | "yellow" | "lime" | "blue" | — | Solid disc in the house color; the initials are dark or white depending on the color. "auto" picks from the name (always the same color for the same person). No color: neutral. |
| status | "online" | "away" | "busy" | "offline" | — | Dot in the corner; the state is added to the name that is read ("Ana Souza, online"). |
| fallback | ReactNode | — | Replaces the initials (a user icon, for example). |
| AvatarGroup max | number | 4 | How many show in the group; the rest becomes +N. |
| AvatarGroup total | number | — | Real total when the list is only a sample (3 photos out of 128 members → +125). |
| AvatarGroup size / shape | igual ao Avatar | "md" | Applies to all avatars in the group and to the +N. |