Components

Avatar

Square avatar on Base UI Avatar: hairline frame, greyscale image, initials fallback from props.

JOJane Okafor

Install

bash

npx shadcn add @eloquent/avatar

Usage

tsx

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

<Avatar>
  <AvatarImage src="/jane.jpg" alt="Portrait of Jane Okafor" />
  <AvatarFallback>JO</AvatarFallback>
</Avatar>

States

JOJOJO

State	Treatment
Image loaded	Greyscale image fills the square
Image loading or failed	Initials fallback on tint-1
Sizes	Set `size-*` through `className`

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

NANguyễn Thị Ánh

Ink adaptation

Upstream's circle (rounded-full) becomes a square (radius 0) with a 1px ink border. The image is greyscale (grayscale). The fallback is tint-1 with Barlow Condensed capitals.