RetroNativeSelect

A native <select> styled as a Mac OS 9 pop-up menu button, with the raised bevel and double-arrow box. Keeps the browser's own menu, keyboard and form behaviour.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-native-select.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 { RetroNativeSelect } from "@/components/ui/retro-native-select"

Usage

<RetroNativeSelect defaultValue="geneva">
  <RetroNativeSelectOption value="charcoal">Charcoal</RetroNativeSelectOption>
  <RetroNativeSelectOption value="geneva">Geneva</RetroNativeSelectOption>
</RetroNativeSelect>

Default

Small

Option Groups

Disabled

Invalid

className is applied to the wrapper, so width utilities size the whole pop-up button. Use RetroSelect when you need a fully custom OS9 menu instead of the platform one.