Skip to main content

Design System

Avatar

Avatars represent users or entities. They can display images, initials, or icons as fallbacks.

Basic Usage

Avatars can display images or fallback content when images are not available.

With Image

CN

Fallback Only

AB

Sizes

Avatars can be sized using Tailwind classes or custom styles.

Small

SM

Medium

MD

Large

LG

Usage

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

export function MyComponent() {
  return (
    <Avatar>
      <AvatarImage src="/avatar.jpg" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}

Material 3 Features

Shape: Full border radius for circular avatars
Fallback: Uses surface-container-high for fallback background
Theme Support: Automatically adapts to light and dark themes
Accessibility: Proper alt text support via AvatarImage