Avatar - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/avatar

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Fallback

Avatar with fallback initials.

Sizes

Multiple avatar sizes.

Avatar Group

Overlapping avatar group.

API Reference

Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| "xl"`	`"default"`	The size of the avatar.

JDSCDP