Skip to content

Avatar

Displays a user's image with an automatic initials fallback, plus optional status badge and stacked group with overflow count.

Avatar
SH

Installation

pnpm dlx shadcn@latest add @sortui/avatar

Usage

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

Examples

Sizes

SHSHSHSHSH

Variants

SHSH

Badge

SHJLPRTH

Profile

RY
Reiko YamadaOn call · Platform team

Group

JLPRTH

Group count

Production approvals
JLPRTH
+3

With tooltip

Reviewers

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access