Avatar

AM

JL

Online

AM

SR

JL

+33 more people

Copy

import {
  Avatar,
  AvatarBadge,

View Code

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @dots/avatar
Copy

Usage#

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

Copy<Avatar>
  <AvatarImage src="https://avatar.vercel.sh/dots" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Composition#

Use the following composition to build an Avatar:

CopyAvatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Use the following composition to build an AvatarGroup:

CopyAvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Basic#

A basic avatar component with an image and a fallback.

AM

Copy

import {
  Avatar,
  AvatarFallback,

View Code

Badge#

Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

AM

Online

Copy

import {
  Avatar,
  AvatarBadge,

View Code

Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.

Copy<Avatar>
  <AvatarImage src="https://avatar.vercel.sh/dots" alt="Avatar" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon#

You can also use an icon inside <AvatarBadge>.

RC

Copy

import { PlusIcon } from "lucide-react"

import {

View Code

Avatar Group#

Use the AvatarGroup component to add a group of avatars.

AM

SR

JL

Copy

import {
  Avatar,
  AvatarFallback,

View Code

Avatar Group Count#

Use <AvatarGroupCount> to add a count to the group.

AM

SR

JL

+33 more people

Copy

import {
  Avatar,
  AvatarFallback,

View Code

Avatar Group with Icon#

You can also use an icon inside <AvatarGroupCount>.

AM

SR

JL

Copy

import { PlusIcon } from "lucide-react"

import {

View Code

Sizes#

Use the size prop to change the size of the avatar.

AM

AM

AM

Copy

import {
  Avatar,
  AvatarFallback,

View Code

Dropdown#

You can use the Avatar component as a trigger for a dropdown menu.

AM

Copy

"use client"

import {

View Code

API Reference#

Avatar#

The Avatar component is the root component that wraps the avatar image and fallback.

AvatarImage#

The AvatarImage component displays the avatar image.

AvatarFallback#

The AvatarFallback component displays a fallback when the image fails to load.

AvatarBadge#

The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

AvatarGroup#

The AvatarGroup component displays a group of avatars with overlapping styling.

AvatarGroupCount#

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.