jsp-dsv0.1

Avatarshadcn

A person's photo or initials.

Data display
Install
npx shadcn add avatar
Import from
@/components/ui/avatar
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

JPDCRS
Initials when there's no photo. A photo needs alt text naming the person.

Guidance

When to use

  • To show who: comment authors, assignees, the account menu.

Rules

  • Always an AvatarFallback with initials – the image may fail to load.
  • An image's alt is the person's name. Beside the name in text, the avatar is decorative: alt="".
  • Stack several with a "+3" count rather than showing everyone.

Install

Terminal
npx shadcn add avatar
Import
import { Avatar } from "@/components/ui/avatar"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.