RetroButton
A Mac OS 9 styled button with raised bevel effect, active/pressed state, and disabled styling.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-button.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 { RetroButton } from "@/components/ui/retro-button"Default Variant
Primary Variant
Secondary Variant
Default Button
Pass isDefault to mark the button that Return/Enter activates. It draws the thick OS 9 outer ring with a platinum gap, and reserves space for it with a 5px margin.
Size Comparison
Press and hold buttons to see the active/pressed bevel state.