Avatar

A user avatar component with image and fallback

An avatar component built with Ark UI that supports both image and fallback content. Use the convenience API for a single image + fallback, or the compound API for full control.

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

export default function Example() {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/000000?v=4"
      alt="User avatar"
      fallback="JD"
    />
  );
}

View Code

Installation

bash

liminal add avatar

Usage

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

export default function Example() {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/000000?v=4"
      alt="User avatar"
      fallback="JD"
    />
  );
}

View Code

Examples

With image

<Avatar
  src="https://avatars.githubusercontent.com/u/000000?v=4"
  alt="User"
  fallback="U"
/>

View Code

Fallback only

When there is no image or it fails to load, the fallback text or content is shown.

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

export default function Example() {
  return <Avatar fallback="AB" />;
}

View Code

Compound API

For custom layout or multiple elements, use AvatarRoot, AvatarImage, and AvatarFallback.

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

export default function Example() {
  return (
    <AvatarRoot className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
      <AvatarImage src="/avatar.png" alt="User avatar" />
      <AvatarFallback>JD</AvatarFallback>
    </AvatarRoot>
  );
}

View Code

API

Prop	Type	Default	Description
src	string	-	Image URL for the avatar.
alt	string	-	Accessible description of the image.
fallback	React.ReactNode	-	Content shown when there is no image or it fails to load.