AvatarUpdated

Import

import { Avatar } from '@heroui/react';

Usage

import {Avatar} from "@heroui/react";

export function Basic() {
  return (
    <div className="flex items-center gap-4">

Anatomy

Import the Avatar component and access all parts using dot notation.

import { Avatar } from '@heroui/react';

export default () => (
  <Avatar>
    <Avatar.Image/>
    <Avatar.Fallback/>
  </Avatar>
)

Sizes

import {Avatar} from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex items-center gap-4">

Colors

import {Avatar} from "@heroui/react";

export function Colors() {
  return (
    <div className="flex items-center gap-4">

Variants

import {Person} from "@gravity-ui/icons";
import {Avatar, Separator} from "@heroui/react";

export function Variants() {
  const colors = ["accent", "default", "success", "warning", "danger"] as const;

Fallback Content

import {Person} from "@gravity-ui/icons";
import {Avatar} from "@heroui/react";

export function Fallback() {
  return (

Avatar Group

import {Avatar} from "@heroui/react";

const users = [
  {
    id: 1,

Custom Styles

import {Avatar} from "@heroui/react";

export function CustomStyles() {
  return (
    <div className="flex items-center gap-4">

Styling

Passing Tailwind CSS classes

import { Avatar } from '@heroui/react';

function CustomAvatar() {
  return (
    <Avatar className="size-20">
      <Avatar.Image src="..." alt="..." />
      <Avatar.Fallback>XL</Avatar.Fallback>
    </Avatar>
  );
}

Customizing the component classes

To customize the Avatar component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .avatar {
    @apply size-16 border-2 border-primary;
  }

  .avatar__fallback {
    @apply bg-gradient-to-br from-purple-500 to-pink-500;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Avatar component uses these CSS classes (View source styles):

Base Classes

• .avatar - Base container with default size (size-10)
• .avatar__image - Image element with aspect-square sizing
• .avatar__fallback - Fallback container with centered content

Size Modifiers

• .avatar--sm - Small avatar (size-8)
• .avatar--md - Medium avatar (default, no additional styles)
• .avatar--lg - Large avatar (size-12)

Variant Modifiers

• .avatar--soft - Soft variant with lighter background

Color Modifiers

• .avatar__fallback--default - Default text color
• .avatar__fallback--accent - Accent text color
• .avatar__fallback--success - Success text color
• .avatar__fallback--warning - Warning text color
• .avatar__fallback--danger - Danger text color

API Reference

Avatar Props

Avatar.Image Props

Avatar.Fallback Props