RetroAvatar

A user avatar with image and fallback initials in Mac OS 9 beveled frame styling.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-avatar.json"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json

Import

import { RetroAvatar } from "@/components/ui/retro-avatar"

With Image

SJSK

Fallback Initials

SJJIAK

Sizes

SMsm (24px)
DFdefault (32px)
LGlg (48px)

Avatars display a user image with a fallback for missing images.