NostalgiaProvider
A runtime override for the Mac OS 9 design tokens, for theming a subtree.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-theme-provider.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 { NostalgiaProvider } from "@/components/ui/retro-theme-provider"NostalgiaProvider sets the OS9 design tokens as CSS custom properties on a wrapper element at runtime, so you can override or re-theme a subtree. It does not replace the base stylesheet: component classes like bg-os9-gray-300 are Tailwind utilities that need the @theme mappings in your CSS. Install the base styles once with the nostalgia-theme registry item:
npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json
Wrapped in NostalgiaProvider
This content is inside a NostalgiaProvider. All OS9 tokens are available via CSS custom properties.
Usage
import { NostalgiaProvider } from "@/registry/new-york/ui/retro-theme-provider"
export default function Layout({ children }) {
return (
<NostalgiaProvider theme="classic">
{children}
</NostalgiaProvider>
)
}Injected Tokens
--os9-black: #262626
--os9-white: #ffffff
--os9-gray-200 through --os9-gray-800
--os9-azul: #333399
--os9-lavender: #ccccff
--os9-focus: #6666cc
--font-heading, --font-sans, --font-mono
--os9-shadow-raised, --os9-shadow-pressed, --os9-shadow-inset, --os9-shadow-window
Injected Utility Classes
.os9-raised — Raised bevel button/panel
.os9-pressed — Pressed/active bevel
.os9-inset — Inset content area
.os9-window — Window container with drop shadow
.os9-stripes — Title bar stripe pattern
.os9-focus-ring — Focus ring outline
.os9-heading — Heading typography
Wrap any subtree with NostalgiaProvider to override OS9 tokens there. The base styles still come from the nostalgia-theme stylesheet. Currently only the "classic" theme is supported.