- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Component avatar-demo not found in registry.
Installation
pnpm dlx createui@latest add avatar
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="https://github.com/createui.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>Examples
Basic
A basic avatar component with an image and a fallback.
Component avatar-basic not found in registry.
Badge
Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.
Component avatar-badge not found in registry.
Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.
<Avatar>
<AvatarImage src="https://github.com/createui.png" alt="@createui" />
<AvatarFallback>CN</AvatarFallback>
<AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>Badge with Icon
You can also use an icon inside <AvatarBadge>.
Component avatar-badge-icon not found in registry.
Avatar Group
Use the AvatarGroup component to add a group of avatars.
Component avatar-group not found in registry.
Avatar Group Count
Use <AvatarGroupCount> to add a count to the group.
Component avatar-group-count not found in registry.
Avatar Group with Icon
You can also use an icon inside <AvatarGroupCount>.
Component avatar-group-count-icon not found in registry.
Sizes
Use the size prop to change the size of the avatar.
Component avatar-size not found in registry.
Dropdown
You can use the Avatar component as a trigger for a dropdown menu.
Component avatar-dropdown not found in registry.
API Reference
Avatar
The Avatar component is the root component that wraps the avatar image and fallback.
| Prop | Type | Default |
|---|---|---|
size | "default" | "sm" | "lg" | "default" |
className | string | - |
AvatarImage
The AvatarImage component displays the avatar image. It accepts all Radix UI Avatar Image props.
| Prop | Type | Default |
|---|---|---|
src | string | - |
alt | string | - |
className | string | - |
AvatarFallback
The AvatarFallback component displays a fallback when the image fails to load. It accepts all Radix UI Avatar Fallback props.
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarBadge
The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarGroup
The AvatarGroup component displays a group of avatars with overlapping styling.
| Prop | Type | Default |
|---|---|---|
className | string | - |
AvatarGroupCount
The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.
| Prop | Type | Default |
|---|---|---|
className | string | - |
For more information about Radix UI Avatar props, see the Radix UI documentation.