darkroom-ui

Built for editorial product sites

Everything you need to ship a polished marketing or content experience — without a rainbow of accent colors.

• Editorial components

  Typography, cards, hero, navigation, and layout primitives tuned for content-heavy sites.

• Light & dark

  One class on html toggles the whole palette via CSS variables — no duplicate theme objects.

• Tree-shakeable

  Import the full bundle or per-component subpaths like darkroom-ui/button and darkroom-ui/hero.

• Unstyled mode

  Skip CSS module classes and wire your own Tailwind or design tokens with slotProps.

• TypeScript

  First-class types for every component, variant, and provider config option.

• Storybook

  Interactive docs and examples for every component — open Components in the nav to explore.

Styled with CSS variables

Warm paper in light mode, charcoal in dark. Toggle below or use useDarkroomDarkMode() in your app — same storage key as this site.

Get started in minutes

Install the package, import styles once, wrap with the provider, and compose.

pnpm add darkroom-ui

import "darkroom-ui/style.css";
import "darkroom-ui/fonts.css";
import { Button, DarkroomUIProvider } from "darkroom-ui";