Avatar

An image element with a fallback for representing the user.

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/avatar

Usage

Single import

import { Avatar } from "~/components/ui/avatar";
import { Icons } from "~/components/icons";

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

Multiple imports

import {
  AvatarRoot,
  AvatarFallback,
  AvatarImage,
  AvatarPlaceholder,
} from "~/components/ui/avatar";
import { Icons } from "~/components/icons";

<AvatarRoot>
  <AvatarImage src="https://github.com/fellipeutaka.png" alt="@fellipeutaka" />
  <AvatarFallback>FU</AvatarFallback>
  <AvatarPlaceholder>
    <Icons.User className="size-6" />
  </AvatarPlaceholder>
</AvatarRoot>