NostalgiaProvider
A provider component that injects all Mac OS 9 design tokens and utility classes.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-theme-provider.json"
Import
import { NostalgiaProvider } from "@/components/ui/retro-theme-provider"The NostalgiaProvider wraps your application (or a subtree) with all OS9 design tokens as CSS custom properties and injects utility classes. This allows nostalgia-ui components to work without depending on a global stylesheet.
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 your app root or any subtree with NostalgiaProvider to scope OS9 styling. Currently only the "classic" theme is supported.