---
name: "@nostalgia-ui"
slug: "nostalgia-ui"
description: "Mac OS 9 styled components for React. 60 retro UI primitives with platinum bevels, system fonts, and pixel-perfect details. Pure CSS, zero images."
category: "Charts/data viz"
tags: ["auth", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "icons", "loaders", "media", "navigation", "overlays", "retro", "tables", "theming"]
framework: "react"
license: null
author: "giorgioliapakis"
website: "https://nostalgia-ui.com"
github: "https://github.com/giorgioliapakis/nostalgia-ui"
registry: "https://nostalgia-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 60
generated_at: "2026-09-21T01:50:16.753Z"
---

# @nostalgia-ui

Mac OS 9 styled components for React. 60 retro UI primitives with platinum bevels, system fonts, and pixel-perfect details. Pure CSS, zero images.

## Links

- Website: https://nostalgia-ui.com
- GitHub: https://github.com/giorgioliapakis/nostalgia-ui
- Registry JSON: https://nostalgia-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/nostalgia-ui
- This file: https://sh4dcn.vercel.app/md/nostalgia-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://nostalgia-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://nostalgia-ui.com/r/registry.json
bunx shadcn@latest add https://nostalgia-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/giorgioliapakis/nostalgia-ui.git
# fetch the raw registry index
curl -s https://nostalgia-ui.com/r/registry.json
```

## Components (60)

| name | type | description | install |
| --- | --- | --- | --- |
| retro-label | registry:ui | A Mac OS 9 styled label with Geneva 10pt default and Charcoal 12pt large size variants, built on Radix UI Label. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-label.json` |
| retro-button | registry:ui | A Mac OS 9 styled button with raised bevel effect, active/pressed state, and disabled styling. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-button.json` |
| retro-input | registry:ui | A Mac OS 9 styled text input with inset bevel effect, focus ring, and two sizes. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-input.json` |
| retro-radio | registry:ui | A Mac OS 9 styled radio button group with 3D circular bevel effect, built on Radix UI Radio Group. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-radio.json` |
| retro-tabs | registry:ui | Mac OS 9 styled tabs with large/small sizes and raised bevel active state, built on Radix UI Tabs. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-tabs.json` |
| retro-progress | registry:ui | A Mac OS 9 styled progress bar with inset bevel track and candy-stripe azul fill pattern. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-progress.json` |
| retro-title-bar | registry:ui | A Mac OS 9 styled title bar with striped drag region, close/collapse/zoom control boxes, and centered title text. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-title-bar.json` |
| retro-slider | registry:ui | A Mac OS 9 styled slider with rectangular raised bevel thumb and inset track, built on Radix UI Slider. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-slider.json` |
| retro-checkbox | registry:ui | A Mac OS 9 styled checkbox with inset bevel effect, inline SVG checkmark, and active/disabled states. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-checkbox.json` |
| retro-menu-bar | registry:ui | A Mac OS 9 styled menu bar with horizontal strip, bevel highlights, azul active state, and dropdown menus with classic drop shadow. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-menu-bar.json` |
| retro-window | registry:ui | A Mac OS 9 styled window frame with title bar, close/collapse/zoom controls, active/inactive states, and content area. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-window.json` |
| retro-select | registry:ui | A Mac OS 9 styled select dropdown with raised bevel trigger, up/down chevron arrows, and azul-highlighted menu items, built on Radix UI Select. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-select.json` |
| retro-separator | registry:ui | A Mac OS 9 styled separator with classic beveled line effect: dark top/left pixel and light bottom/right pixel, built on Radix UI Separator. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-separator.json` |
| retro-textarea | registry:ui | A Mac OS 9 styled textarea with inset bevel effect, focus ring, vertical resize, and two sizes. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-textarea.json` |
| retro-badge | registry:ui | A Mac OS 9 styled badge with raised bevel effect, Geneva 9px font, and three color variants: default, accent (lavender), and azul. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-badge.json` |
| retro-popover | registry:ui | A Mac OS 9 styled popover with classic drop shadow, built on Radix UI Popover. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-popover.json` |
| retro-toggle | registry:ui | A Mac OS 9 styled toggle button with raised/pressed bevel states, built on Radix UI Toggle. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-toggle.json` |
| retro-card | registry:ui | A Mac OS 9 styled card with raised bevel effect, header with bevel separator, title, description, content area, and footer with action buttons. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-card.json` |
| retro-switch | registry:ui | A Mac OS 9 styled binary toggle switch with rectangular inset track, raised bevel thumb, and azul checked state, built on Radix UI Switch. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-switch.json` |
| retro-tooltip | registry:ui | A Mac OS 9 Balloon Help styled tooltip with pale yellow background, rounded corners, and drop shadow, built on Radix UI Tooltip. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-tooltip.json` |
| retro-hover-card | registry:ui | A Mac OS 9 styled hover card with solid border and drop shadow, built on Radix UI Hover Card. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-hover-card.json` |
| retro-alert | registry:ui | A Mac OS 9 styled alert box with raised bevel effect, left accent border, and three variants: default, warning, and destructive. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-alert.json` |
| retro-pagination | registry:ui | A Mac OS 9 styled pagination component with raised bevel page buttons, active/pressed state, previous/next navigation, and ellipsis indicator. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-pagination.json` |
| retro-avatar | registry:ui | A Mac OS 9 styled avatar with beveled border, image support, fallback initials, and sm/default/lg size variants, built on Radix UI Avatar. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-avatar.json` |
| retro-skeleton | registry:ui | A Mac OS 9 styled skeleton loading placeholder with dithered diagonal hatching pattern and optional pulse animation. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-skeleton.json` |
| retro-chevron | registry:ui | A Mac OS 9 styled chevron arrow (filled triangle) with configurable direction, two color variants, and two sizes. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-chevron.json` |
| retro-breadcrumb | registry:ui | A Mac OS 9 Finder-style breadcrumb navigation with Geneva 10px text, azul links, right-pointing triangle separators, and ellipsis for collapsed paths. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-breadcrumb.json` |
| retro-toast | registry:ui | A Mac OS 9 styled custom toast system with mini-window appearance, striped title bar, beveled close box, and auto-dismiss via useRetroToast hook. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-toast.json` |
| retro-nav-button | registry:ui | A Mac OS 9 styled 16x16 navigation button with raised bevel, centered SVG arrow, and four directions: left, right, up, down. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-nav-button.json` |
| retro-context-menu | registry:ui | A Mac OS 9 styled context menu with right-click trigger, sub-menus, checkbox/radio items, keyboard shortcuts, and classic drop shadow, built on Radix UI Contex… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-context-menu.json` |
| retro-dialog | registry:ui | A Mac OS 9 styled modal dialog with overlay, OS9 window frame, striped title bar with close box, description area, and footer for action buttons, built on Radi… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-dialog.json` |
| retro-alert-dialog | registry:ui | A Mac OS 9 styled alert dialog with OS9 window shadow, striped title bar, caution icon, and modal behavior, built on Radix UI Alert Dialog. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-alert-dialog.json` |
| retro-toggle-group | registry:ui | A Mac OS 9 styled toggle group with shared borders, raised/pressed bevel states, and single or multiple selection modes, built on Radix UI Toggle Group. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-toggle-group.json` |
| retro-table | registry:ui | A Mac OS 9 styled data table with raised bevel column headers, hover highlight, azul selected row, and Finder list-view appearance. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-table.json` |
| retro-sheet | registry:ui | A Mac OS 9 styled sheet (slide-over panel) with side variants, striped title bar, close box, and overlay, built on Radix UI Dialog. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-sheet.json` |
| retro-scrollbar | registry:ui | A Mac OS 9 styled scroll area with 16px wide/tall scrollbars featuring raised bevel thumb, inset track, and arrow navigation buttons at each end, built on Radi… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-scrollbar.json` |
| retro-navigation-menu | registry:ui | A Mac OS 9 styled navigation menu with horizontal strip, azul active triggers, dropdown content with classic drop shadow, and lavender hover links, built on Ra… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-navigation-menu.json` |
| retro-accordion | registry:ui | A Mac OS 9 styled accordion with disclosure triangle, bevel separator, and collapse animation, built on Radix UI Accordion. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-accordion.json` |
| retro-collapsible | registry:ui | A Mac OS 9 styled collapsible disclosure with rotating triangle indicator, Charcoal heading trigger, and indented Geneva content area, built on Radix UI Collap… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-collapsible.json` |
| retro-dropdown-menu | registry:ui | A Mac OS 9 styled dropdown menu with white background, classic drop shadow, azul-highlighted items, bevel separators, submenus, checkbox/radio items, and keybo… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-dropdown-menu.json` |
| retro-theme-provider | registry:ui | A Mac OS 9 theme provider that injects all OS9 CSS variables and utility classes so consumers can use nostalgia-ui components without manual globals.css setup. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-theme-provider.json` |
| retro-typography | registry:ui | A polymorphic Mac OS 9 text component with semantic variants matching the OS9 Figma type system: editorial (Apple Garamond 24pt), headline/smallHeadline (Charc… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-typography.json` |
| retro-toolbar | registry:ui | A Mac OS 9 styled toolbar with icon buttons, separators, and button groups. Includes RetroToolbar, RetroToolbarButton, RetroToolbarSeparator, and RetroToolbarG… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-toolbar.json` |
| retro-aspect-ratio | registry:ui | A Mac OS 9 styled aspect ratio container with optional inset border, built on Radix UI Aspect Ratio. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-aspect-ratio.json` |
| retro-spinner | registry:ui | Mac OS 9 styled loading indicators: RetroSpinner (animated wristwatch cursor with rotating second hand) and RetroBeachBall (spinning pinwheel wait cursor with … | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-spinner.json` |
| retro-carousel | registry:ui | A Mac OS 9 styled carousel/slideshow with inset panel container, raised bevel navigation buttons with triangle arrow SVGs, and embla-carousel-react for smooth … | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-carousel.json` |
| retro-input-otp | registry:ui | A Mac OS 9 styled one-time password input with individual inset bevel character slots, blinking caret, focus ring, and group separators, built on input-otp. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-input-otp.json` |
| retro-resizable | registry:ui | A Mac OS 9 styled resizable panel group for split layouts with raised bevel handle, grip dots, and drag-darkening effect, built on react-resizable-panels. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-resizable.json` |
| retro-drawer | registry:ui | A Mac OS 9 styled bottom sheet / drawer with pull handle, OS9 window bevel, and overlay, built on vaul. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-drawer.json` |
| retro-form | registry:ui | A React Hook Form integration with Mac OS 9 styling. Provides RetroForm, RetroFormField, RetroFormItem, RetroFormLabel, RetroFormControl, RetroFormDescription,… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-form.json` |
| retro-command | registry:ui | A Mac OS 9 styled command palette (search interface) with inset search input, azul-highlighted items, keyboard shortcut labels, and modal dialog variant, built… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-command.json` |
| retro-calendar | registry:ui | A Mac OS 9 styled date selection calendar grid with raised bevel navigation buttons, azul selected day, lavender hover and range states, built on react-day-pic… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-calendar.json` |
| retro-chart | registry:ui | Mac OS 9 styled charting components with Balloon Help tooltips, square legend indicators, inset bevel container, and Geneva typography, built on recharts. Prov… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-chart.json` |
| retro-date-picker | registry:ui | A Mac OS 9 styled date picker with inline text input (MM/DD/YYYY), calendar icon trigger button, and popover calendar dropdown, composed from RetroPopover and … | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-date-picker.json` |
| retro-date-range-picker | registry:ui | A Mac OS 9 styled date range picker with two inline text inputs, en-dash separator, calendar icon trigger, and a two-month popover calendar for range selection. | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-date-range-picker.json` |
| retro-combobox | registry:ui | A Mac OS 9 styled searchable select / autocomplete combobox with inset bevel trigger, search input, azul-highlighted items, checkmark selection indicator, and … | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-combobox.json` |
| retro-data-table | registry:ui | A Mac OS 9 styled full-featured data table with column sorting, text filtering, pagination, row selection, and column visibility, built on @tanstack/react-tabl… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-data-table.json` |
| retro-desktop | registry:ui | A Mac OS 9 styled full-viewport desktop layout with pinned menu bar (Apple logo + live clock), desktop area with optional dot-pattern wallpaper, and selectable… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-desktop.json` |
| retro-sidebar | registry:ui | A Mac OS 9 styled app shell layout with collapsible sidebar, context-driven open/closed state, menu items with azul active and lavender hover, keyboard shortcu… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-sidebar.json` |
| retro-icons | registry:ui | Classic Mac OS 9 system icons as pure inline SVG components: Folder, Document, Trash, HardDrive, Floppy, Application, Alert, Info, Question, Stop, Network, Pri… | `npx shadcn@latest add https://nostalgia-ui.com/r/retro-icons.json` |

## For AI agents

```text
You are adding components from @nostalgia-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/nostalgia-ui.md) for the component list.
2. Fetch the machine-readable index: https://nostalgia-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: nostalgia-ui).
```