Avatar

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.

PreviewCode

RegistryCopiedCopyCopied

Installation

npx shadcn@latest add @intentui/avatar

Manual installation

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.