Data display · Application UI
Avatar
A compound avatar component built on Base UI primitives, supporting image display with fallback text, an optional badge indicator, and grouped avatar stacks.
Feature showcase
Installation
Features
6 examples
Default, Fallback, Group, Sizes, User List, With Badge.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "lg" | "default" | Controls the overall size of the avatar (sm=24px, default=32px, lg=40px). |
| className | string | - | Additional CSS classes merged onto the root element. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/avatar.tsx |
| Default example | content/examples/avatar/default.tsx |
| Fallback example | content/examples/avatar/fallback.tsx |
| Group example | content/examples/avatar/group.tsx |
| Sizes example | content/examples/avatar/sizes.tsx |
| User List example | content/examples/avatar/user-list.tsx |
| With Badge example | content/examples/avatar/with-badge.tsx |