Avatar

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/avatar.json

npx shadcn@latest add https://prototyper-ui.com/r/avatar.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/avatar.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/avatar.json

This will add the following files to your project:

• components/ui/avatar.tsx

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="/avatar.png" alt="User" />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Examples

Fallback

Styling

Data Slots

Use data-slot attributes to target specific parts of the avatar:

Customization Examples

/* Make all avatars larger */
[data-slot="avatar"] {
  @apply size-12 rounded-lg after:rounded-lg;
}

/* Custom fallback color */
[data-slot="avatar-fallback"] {
  @apply bg-primary text-primary-foreground;
}

{/* Override styles via className */}
<Avatar className="size-12 rounded-lg after:rounded-lg">
  <AvatarImage src="/avatar.png" alt="User" />
  <AvatarFallback className="rounded-lg">AB</AvatarFallback>
</Avatar>

API Reference

Avatar

Root component that wraps the avatar image and fallback. Supports three sizes via the size prop.

All Base UI Avatar.Root props are forwarded via ...props.

AvatarImage

Displays the user's image. Automatically hidden when the image fails to load.

All Base UI Avatar.Image props are forwarded via ...props.

AvatarFallback

Displayed when no image is provided or while the image is loading. Typically renders initials or an icon.

All Base UI Avatar.Fallback props are forwarded via ...props.

AvatarBadge

A small status indicator positioned at the bottom-right corner of the avatar. Size adapts to the parent avatar's size.

All standard span props are forwarded via ...props.

AvatarGroup

Wraps multiple avatars in an overlapping horizontal stack.

All standard div props are forwarded via ...props.

AvatarGroupCount

Displays the count of remaining avatars that are not shown in the group.

All standard div props are forwarded via ...props.

Accessibility

ARIA Attributes

• The AvatarImage renders a standard <img> element. Always provide a descriptive alt attribute for screen readers.
• When no image is available, AvatarFallback content (initials or icon) serves as the visual representation. Ensure the fallback is meaningful.
• AvatarBadge is decorative by default. Add aria-label if the badge conveys important status information.
• AvatarGroup uses standard div semantics. Consider adding role="group" and aria-label for groups of avatars.

Related