Avatar

The Avatar displays a user image and falls back to initials when the image is unavailable.

Preview

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/registry/spark-ui/avatar";

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

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/avatar.json

Usage

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

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

Properties

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the avatar.
`className`	`string`	`—`	Additional CSS classes.