Avatar

An image element with a fallback for representing the user.

Installation

npx kanpeki-ui@latest add avatar

Usage

Single import

import { Avatar } from "~/components/ui/avatar";
import { Icons } from "~/components/ui/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/ui/icons";
<AvatarRoot>
  <AvatarImage src="https://github.com/fellipeutaka.png" alt="@fellipeutaka" />
  <AvatarFallback>FU</AvatarFallback>
  <AvatarPlaceholder>
    <Icons.User className="size-6" />
  </AvatarPlaceholder>
</AvatarRoot>

Examples

Group

+3