Design System Builder

Avatar

Avatar is a component component that provides avatar functionality.

Active
Avatar

Examples

size

Different size options for the Avatar component.

sm

Avatar

md

Avatar

lg

Avatar

Installation

npm install @your-design-system/avatar
import { Avatar } from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <Avatar size="md">
      {/* Content */}
    </Avatar>
  )
}

API Reference

PropTypeDefaultDescription
srcstring-

The src prop for the component.

altstring-

The alt prop for the component.

fallbackstring-

The fallback prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

relativeflexshrink-0overflow-hiddenrounded-full

size Variants

sm

h-8w-8

md

h-10w-10

lg

h-12w-12

Design System Compliance

This component is validated against atomic design principles and foundation token usage.