Avatar

PreviewCode

RegistryCopiedCopyCopied

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.

npm install tailwind-merge

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.