Avatar

An image element with a fallback for representing a user or entity.

1. Import

Import the avatar components from the design system.

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/design-system/components/ui/avatar"

2. Props

Avatar component props.

Prop	Type	Default
className	string	--

3. Usages

Common avatar patterns and configurations.

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

export function Example() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  );
}