Components
Avatar
An image element with a fallback for representing the user.
Loading
Installation
pnpm dlx shadcn@latest add @toui/avatar
Examples
Fallback
Loading
Indicator
Loading
Status
Loading
Badge
Loading
Size
Loading
Shapes
Group
Loading
Users
Loading
Pattern
Tokens
8 CSS variables in 2 categories.
size
| CSS Variable | Value | Description |
|---|---|---|
--avatar-size-xs | calc(var(--spacing) * 6) | 1.5rem — 24px |
--avatar-size-sm | calc(var(--spacing) * 8) | 2rem — 32px |
--avatar-size-md | calc(var(--spacing) * 10) | 2.5rem — 40px |
--avatar-size-lg | calc(var(--spacing) * 12) | 3rem — 48px |
--avatar-size-xl | calc(var(--spacing) * 18) | 4.5rem — 72px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--avatar-radius-circle | 9999px | — |
--avatar-radius-square | 0px | — |
--avatar-radius-rounded | var(--component-radius-sm) | — |
API Reference
This component builds on the Radix UI Avatar primitives, adding customization options such as indicators and status.
Avatar
This component is based on the Avatar.Root primitive.
| Prop | Type | Default |
|---|---|---|
className |
AvatarImage
This component is based on the Avatar.Image primitive.
| Prop | Type | Default |
|---|---|---|
className |
AvatarFallback
This component is based on the Avatar.Fallback primitive.
| Prop | Type | Default |
|---|---|---|
className |
AvatarIndicator
This is a custom component used to display an indicator within the avatar.
| Prop | Type | Default |
|---|---|---|
className |
AvatarStatus
This is a custom component for displaying a status indicator on the avatar.
| Prop | Type | Default |
|---|---|---|
variant | online | |
className |
Credits
- Built with Radix UI Avatar.