Components
Avatar (Radix UI)
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
Loading
Group
Loading
Users
Loading
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.