Avatar

cardfrom shadcn/ui Essentials

Avatar

AI Usage Rules

Use Avatar for user profile images. Always include AvatarFallback with initials. Use AvatarImage for the actual image with a descriptive alt text.

Code Template

"use client"
import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"

function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return <AvatarPrimitive.Root data-slot="avatar" className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)} {...props} />
}

function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full", className)} {...props} />
}

function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return <AvatarPrimitive.Fallback data-slot="avatar-fallback" className={cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground", className)} {...props} />
}

export { Avatar, AvatarImage, AvatarFallback }

Props Schema

Property	Type	Default
alt	string	—
src	string	—
fallback	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "alt": {
      "type": "string"
    },
    "src": {
      "type": "string"
    },
    "fallback": {
      "type": "string"
    }
  }
}