Avatar

import {
  Avatar,
  AvatarBadge,

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/avatar
Copy

Usage#

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

Copy<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <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

Examples#

Basic#

A basic avatar component with an image and a fallback.

import {
  Avatar,
  AvatarFallback,

Badge#

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

import {
  Avatar,
  AvatarBadge as AvatarBadgeComponent,

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

Copy<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon#

You can also use an icon inside <AvatarBadge>.

import { IconPlus } from "@tabler/icons-react"

import {

Avatar Group#

Use the AvatarGroup component to add a group of avatars.

import {
  Avatar,
  AvatarFallback,

Avatar Group Count#

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

import {
  Avatar,
  AvatarFallback,

Avatar Group with Icon#

You can also use an icon inside <AvatarGroupCount>.

import { IconPlus } from "@tabler/icons-react"

import {

Sizes#

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

import {
  Avatar,
  AvatarFallback,

Dropdown#

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

"use client"

import {

API reference#

The component wraps Base UI Avatar and accepts all of its props.