Avatar

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

AVJDNA

Prop reference

Auto-generated from the component source

Avatar

className

React.ComponentProps<typeof AvatarPrimitive.Root>

AvatarFallback

className

React.ComponentProps<typeof AvatarPrimitive.Fallback>

AvatarImage

className

React.ComponentProps<typeof AvatarPrimitive.Image>

Code

// owner: Sona
"use client";

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

export default function AvatarExample() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Avatar className="size-12">
        <AvatarImage src="https://i.pravatar.cc/100?img=3" alt="Ava" />
        <AvatarFallback>AV</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarImage src="https://i.pravatar.cc/100?img=25" alt="Jordan" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarFallback>NA</AvatarFallback>
      </Avatar>
    </div>
  );
}

Avatar

Component preview

On this page

Command Palette