Docs
Components
Avatar

Avatar

An image element with a fallback for representing the user.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/avatar

Anatomy

Single import

Multiple imports

import { UserIcon } from "lucide-react";
import { Avatar } from "~/components/ui/avatar";

<Avatar.Root>
  <Avatar.Image src="https://github.com/fellipeutaka.png" alt="@fellipeutaka" />
  <Avatar.Fallback>FU</Avatar.Fallback>
  <Avatar.Placeholder>
    <UserIcon className="size-6" />
  </Avatar.Placeholder>
</Avatar.Root>

Examples

Group

Preview

Code

API Reference

Root

Contains all the parts of an avatar.

Image

The image to render. By default it will only render when it has loaded.

Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error.

Placeholder

An element that renders when the image is loading.

Autocomplete Badge

On This Page

Installation
Anatomy
Examples
Group
API Reference
Root
Image
Fallback
Placeholder

Contribute

Report an issue
Request a feature
Edit this page