Installation
Add this component to your project using the npui CLI:
npx npui add avatarVariants & Examples
Default Avatar
A basic avatar with an image and a fallback for when the image fails to load.
CN
1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
2
3export function DefaultAvatar() {
4 return (
5 <Avatar>
6 <AvatarImage src="/placeholder.svg?height=40&width=40" alt="@shadcn" />
7 <AvatarFallback>CN</AvatarFallback>
8 </Avatar>
9 )
10}Avatar with Initials
An avatar displaying initials when no image is provided or available.
JD
1import { Avatar, AvatarFallback } from "@/components/ui/avatar"
2
3export function InitialsAvatar() {
4 return (
5 <Avatar>
6 <AvatarFallback>JD</AvatarFallback>
7 </Avatar>
8 )
9}Props
These are the available props for the Avatar component:
| Prop | Type | Description | Default |
|---|---|---|---|
| src | string | The URL of the image to display. | - |
| alt | string | Alternative text for the image. | - |
| children | React.ReactNode | The content of the avatar (e.g., AvatarImage, AvatarFallback). | - |