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.
Basic
It ain't just a pic with curved corners, for real. It's the whole vibe, whispering secrets without a peep. A cheeky sneak into the deep, snatching more than your eyes can peep.
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"
/>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.
Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.
