Components
/
Avatar
Avatar
An image element with a fallback for representing the user.
CNSU
CNHLHRJW
Installation
npx shadcn@latest add https://ui.saturation.io/r/avatar.jsonUsage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
export default function Example() {
return (
<Avatar>
<AvatarImage src="/images/design-mode/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
)
}Examples
Default
CN
Fallback
When the image fails to load, the fallback is displayed.
SU
Sizes
CNCNCNCN
Avatar Group
Display multiple avatars in an overlapping group with hover tooltips.
CNHLHRJW
API Reference
| Component | Prop | Type | Description |
|---|---|---|---|
| AvatarImage | src | string | The image source URL |
| AvatarImage | alt | string | Alternative text for the image |
| AvatarFallback | children | ReactNode | Content to display when image fails |
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.