Getting started

Theming

AtroUI’s design system is dark-first: black canvas, brand blue from the hero shader (#0b7bff), Outfit UI, glass panels, and pill CTAs. Tokens live in atroui/globals.css.

CSS variables

Light and dark themes live under :root and .dark. Override brand or neutrals to restyle without rewriting components.

css

.dark {
  --brand: oklch(0.62 0.2 255);
  --background: oklch(0 0 0);
  --primary: oklch(0.99 0 0);
  --primary-foreground: oklch(0 0 0);
  --font-sans: var(--font-outfit);
}

Fonts

Load Outfit in the host layout and expose --font-outfit. Display and UI share the same family at medium weight — matching the hero typography.

Dark mode

Prefer the package ThemeProvider with enableSystem. Pair with ThemeToggle.

tsx

import { ThemeProvider, ThemeToggle } from "atroui"

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  <ThemeToggle />
  {children}
</ThemeProvider>