Avatar
An image element with a fallback for representing the user.
Installation
$ npx shadcn@latest add "/r/avatar.json"
Usage
CN
Sizes
Use the size prop to change the dimensions of the avatar.
CNCNCNCN
With Fallback
The AvatarFallback is shown when the image fails to load or is not provided.
JD
Props
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" | The size of the avatar. |
| className | string | - | Additional CSS classes to apply to the avatar. |
AvatarImage
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | The source URL of the image. |
| alt | string | - | The alternative text for the image. |
| className | string | - | Additional CSS classes to apply to the image. |
AvatarFallback
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes to apply to the fallback. |