Holo Avatar
A die-cut avatar sticker. The foil ring picks up the pointer the way a real holographic sticker picks up a light source.
DisplayClient componentclass-variance-authority
Preview
Lucia Moretti is online
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/holo-avatarPulls in @duck/theme, @duck/use-holo-pointer. Already installed items are skipped.
Usage
import { HoloAvatar, HoloAvatarGroup } from "@/components/ui/holo-avatar"The file lands in components/ui/holo-avatar.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | Image URL. |
| alt | string | "" | Alternative text for the image. |
| fallback | string | - | Initials shown when the image is missing or fails. |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "default" | 28px through 96px. |
| shape | "circle" | "sticker" | "circle" | sticker is a squircle with a slight tilt. |
| ring | "foil" | "holo" | "primary" | "none" | "foil" | foil tracks the pointer. holo is the static gradient. |
| status | "online" | "away" | "offline" | - | Dot in the lower corner, announced to screen readers. |
| max | number | - | On HoloAvatarGroup: how many avatars to show before a +N chip. |
Rules
What keeps this component from turning into noise.
- In a list of people, use ring="none" and give the foil to the one avatar that matters.