Mac OS 9 UI Components for React
A shadcn-compatible component registry with 59 Mac OS 9 styled components. Every visual effect is pure CSS — zero image assets.
npx shadcn@latest add https://nostalgia-ui.com/r/retro-button.json
Button
Checkbox, Radio, Switch
Input & Textarea
Select
Toggle & Toggle Group
Slider
Input OTP
Combobox
Date Picker
Tabs
General settings panel content.
Accordion
Collapsible
Aspect Ratio
16:9 Aspect Ratio
Resizable
Panel A
Panel B
Carousel
Slide 1: Extensions Manager
Slide 2: Control Panels
Slide 3: Chooser
Skeleton
Card & Separator
This entire section is rendered inside a RetroCard. The line below is a RetroSeparator.
Content below the separator.
Breadcrumb
Pagination
Navigation Menu
Menu Bar
Nav Button & Chevron
Chevrons
Nav Buttons
Dropdown Menu
Table
| Name | Size | Kind |
|---|---|---|
| SimpleText | 264 KB | Application |
| ReadMe | 4 KB | Document |
| System Folder | -- | Folder |
Data Table
| Name | Size | Kind | Modified |
|---|---|---|---|
| System Folder | -- | Folder | Jan 1, 2000 |
| SimpleText | 264 KB | Application | Feb 15, 2000 |
| ReadMe | 4 KB | Document | Mar 10, 2000 |
| Scrapbook | 32 KB | Desk Accessory | Apr 5, 2000 |
Badge
Avatar
Progress
Determinate (65%)
Indeterminate
Dialog
Alert Dialog
Sheet
Drawer
Popover
Hover Card
Tooltip
Context Menu
Right-click here
Alert
Notice
This is a default alert notification.
Warning
The startup disk is almost full.
Error
The application has unexpectedly quit.
Toast
Spinner
RetroSpinner (Watch)
RetroBeachBall
Command
Window
Mac OS 9.2.2
Built-in Memory: 256 MB
Title Bar
Toolbar
Scrollbar
Desktop
Icons
Typography
Editorial (24px serif)
Headline (12px Charcoal)
Small Headline (10px Charcoal)
Body (10px Geneva)
Body Small (9px Geneva)
Body Bold (9px Geneva bold)
Body Slanted (9px Geneva italic)
Mono (10px Monaco)
Chart
Sidebar
Theme Provider
The RetroThemeProvider is an infrastructure component that provides the OS9 design tokens and theme context. It wraps your application and is not rendered visually.
Form
The RetroForm component integrates with react-hook-form for validation. Here is a simplified example: