Avatar
Installation
npx shadcn add https://hq-ui.vercel.app/r/avatar
Examples
Basic
A basic avatar component with an image and a fallback.
avatar-basic
CN
Badge
Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.
avatar-badge
CN
Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.
<Avatar src="https://github.com/shadcn.png" alt="@shadcn" fallback="CN">
<AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>Badge with Icon
You can also use an icon inside <AvatarBadge>.
avatar-badge-icon
PP
Avatar Group
Use the AvatarGroup component to add a group of avatars.
avatar-group
CN
LR
ER
Avatar Group Count
Use <AvatarGroupCount> to add a count to the group.
avatar-group-count
CN
LR
ER
+3
Avatar Group with Icon
You can also use an icon inside <AvatarGroupCount>.
avatar-group-count-icon
CN
LR
ER
Sizes
Use the size prop to change the size of the avatar.
avatar-size
CN
CN
CN
Dropdown
You can use the Avatar component as a trigger for a dropdown menu.
avatar-dropdown
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 | - |
src | string | - |
alt | string | - |
className | string | - |
fallback | string | <IconUser/> |