Avatar

● LIVE

OPNR

"use client";import {  Avatar,  AvatarFallback,  AvatarImage,} from "@/registry/okibi/ui/avatar";export default function AvatarDemo() {  return (    <div className="flex items-center gap-3">      <Avatar>        <AvatarImage src="https://github.com/shadcn.png" alt="Operator" />        <AvatarFallback>OP</AvatarFallback>      </Avatar>      <Avatar>        <AvatarFallback>NR</AvatarFallback>      </Avatar>    </div>  );}

npx shadcn@latest add https://okibi.cndr.dev/r/avatar.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/avatar.json

Install the required dependencies:

npm install @radix-ui/react-avatar class-variance-authority

Copy the source from the Code tab above into components/ui/avatar.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

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

<Avatar>
  <AvatarImage src="/operator.png" alt="Operator" />
  <AvatarFallback>OP</AvatarFallback>
</Avatar>

Anatomy

<Avatar>
  <AvatarImage src="/operator.png" alt="Vanta-7" />
  <AvatarFallback>V7</AvatarFallback>
</Avatar>

Examples

Group

Overlap several avatars with negative spacing and a background ring to show a roster or set of assignees.

● LIVE

JNOPNR+4

import { Avatar, AvatarFallback } from "@/registry/okibi/ui/avatar";export default function AvatarGroupDemo() {  return (    <div className="flex -space-x-2">      <Avatar className="ring-2 ring-background">        <AvatarFallback>JN</AvatarFallback>      </Avatar>      <Avatar className="ring-2 ring-background">        <AvatarFallback>OP</AvatarFallback>      </Avatar>      <Avatar className="ring-2 ring-background">        <AvatarFallback>NR</AvatarFallback>      </Avatar>      <Avatar className="ring-2 ring-background">        <AvatarFallback>+4</AvatarFallback>      </Avatar>    </div>  );}

Fallback

When the image is missing or fails to load, AvatarFallback shows the uppercase initials instead.

● LIVE

JNNR

Signal lost // initials hold

import {  Avatar,  AvatarFallback,  AvatarImage,} from "@/registry/okibi/ui/avatar";export default function AvatarFallbackDemo() {  return (    <div className="flex flex-col items-center gap-3">      <div className="flex items-center gap-3">        <Avatar>          <AvatarImage src="/does-not-exist.png" alt="Operator" />          <AvatarFallback>JN</AvatarFallback>        </Avatar>        <Avatar>          <AvatarFallback>NR</AvatarFallback>        </Avatar>      </div>      <p className="font-mono text-[0.6rem] uppercase tracking-grid-wide text-muted-foreground">        Signal lost // initials hold      </p>    </div>  );}

Sizes

The size scale — sm, md (default), and lg — scales the tile and the initials together, so a roster reads at one density without per-instance overrides.

● LIVE

SMMDLG

import {  Avatar,  AvatarFallback,  AvatarImage,} from "@/registry/okibi/ui/avatar";export default function AvatarSizesDemo() {  return (    <div className="flex items-center justify-center gap-4">      <Avatar size="sm">        <AvatarFallback>SM</AvatarFallback>      </Avatar>      <Avatar size="md">        <AvatarImage src="/does-not-exist.png" alt="Operator" />        <AvatarFallback>MD</AvatarFallback>      </Avatar>      <Avatar size="lg">        <AvatarFallback>LG</AvatarFallback>      </Avatar>    </div>  );}

API Reference

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tile size; the `AvatarFallback` initials scale with it.

Accessibility

Always give AvatarImage a meaningful alt (the person or entity it represents); the alt is consumer-supplied and has no default.
A bare AvatarFallback exposes only ambiguous initials to assistive tech — put the full name on a wrapping link or a title so the identity is recoverable when no image loads.
Keep fallback initials to two characters; the squared tile clips with no ellipsis, and longer strings overflow the size-scaled type.
Set size once on Avatar — it propagates through context to scale the AvatarFallback initials in lockstep, so the accessible label and the visible glyphs stay proportional.

Guidelines

Set the size prop (sm / md / lg) on Avatar rather than hand-rolling size-8 / size-12 on className.
Pair every AvatarImage with an AvatarFallback so a failed or slow image degrades to legible initials.
Use uppercase two-letter initials in the fallback to match the HUD identity-tile voice.

Don't

Don't rely on initials alone to convey identity — they read as ambiguous noise to screen readers without a fuller label nearby.
Don't round the tile or soften the border-border-strong keyline; the squared chip is the brand.
Don't stuff three-plus characters into the fallback — it clips against the square edge.

Avatar

On this page