RetroListBox
An inset white list box with selectable rows. Single or multiple selection, azul highlight, Arrow/Home/End navigation, type-ahead, and listbox/option semantics. Works controlled or uncontrolled.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-list-box.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 { RetroListBox } from "@/components/ui/retro-list-box"Usage
<RetroListBox aria-label="Fonts" defaultValue="geneva" className="h-[120px] w-[180px]">
<RetroListBoxItem value="charcoal">Charcoal</RetroListBoxItem>
<RetroListBoxItem value="geneva">Geneva</RetroListBoxItem>
</RetroListBox>
// Multiple selection (Shift = range, Cmd/Ctrl = toggle, Space toggles, Cmd/Ctrl+A)
<RetroListBox multiple value={ids} onValueChange={setIds}>…</RetroListBox>Single Selection
Capitals
Charcoal
Chicago
Courier
Gadget
Geneva
Helvetica
Monaco
New York
Palatino
Sand
Symbol
Techno
Textile
Times
Selected: Geneva
Focus the list with Tab, then use the arrows, Home/End, or type a font name.
Multiple Selection
Apple CD/DVD Driver
AppleShare
Color Picker
File Sharing Extension
Foreign File Access
QuickTime
Sound Manager
Text Encoding Converter
USB Device Extension
2 selected
Shift-click or Shift-arrow extends the range; Cmd/Ctrl-click or Space toggles a row.
With Icons & Disabled Rows
AppleShare
LaserWriter 8
Macintosh HD
Applications
FaxPrint (unavailable)
Disabled List
Item A
Item B
Item C