Avatar
It’s more than a picture with curved corners. It’s a vibe, subtly revealing secrets. A cheeky peek into depth, grabbing more than just your gaze, adding personality.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/avatar
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
Anatomy
import { Avatar } from "@/components/ui/avatar"
<Avatar
src="https://intentui.com/images/avatar/slash.jpg"
alt="Slash"
initials="Sl"
/>Examples
Fallback
If the image fails to load, the avatar will fallback to the initials.
Shape
By default, the avatar is a circle. You can change it to a square by using the isSquare props.
Size
By default, the avatar is medium. You can change it to small, large or extra-large by using the size prop.
Avatar group
You can use the AvatarGroup component to display a group of avatars.
Component API
The Avatar component displays a user image, initials, or fallback identity.
| Prop | Type | Default |
|---|---|---|
alt | string | - |
className | string | - |
initials | string | - |
isSquare | boolean | false |
size | | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | md |
src | string | null | null |
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.
