Theme System

Shavin UI ships with 24 distinct accent color palettes, 5 grayscales, and sizing scale factors. To load a specific theme preset configuration, wrap your root elements inside the ThemeProvider context wrapper:

import { ThemeProvider } from "@shavin/ui";

export default function App() {
  return (
    <ThemeProvider
      accentColor="grass"
      grayColor="zinc"
      radius="medium"
      scaling="95%"
      panelBackground="translucent"
    >
      <MainLayout />
    </ThemeProvider>
  );
}

Skip the individual props — pass a single theme to load a curated brand config: accent, neutrals, radius, density, panel style, and a display/body font pairing. Add individual props alongside to override any of it.

import { ThemeProvider } from "@shavin/ui";

<ThemeProvider theme="Editorial">
  <App />
</ThemeProvider>

Font pairings load from Google Fonts on demand. Tweak any control in the Configurator (top-right) and the preset auto-switches to “Custom”.

The following runtime presets are fully supported and mapped inside our theme manifest:

Light and dark states are driven by toggling the standard .dark class on parent wrapper wrappers. The design system reads variables dynamically, allowing layout colors to adjust seamlessly.