Wocha Docs

Theme editor

Customise `@wocha/ui` component themes with live preview and copy-ready configuration.

Use the interactive theme editor to tune colours, typography, and border radius for Wocha UI components. Preview updates instantly across SignIn, SignUp, UserButton, and OrgSwitcher using real @wocha/ui components.

The editor runs entirely in your browser with mock components — no API keys or authentication required.

Open the editor

Launch theme editor

What you can customise

ControlMaps to
Prebuilt themedefault, minimal, shadcn, corporate presets from @wocha/ui/themes
Primary colour--wocha-color-primary
Background--wocha-color-background
Text colour--wocha-color-foreground
Border radiusappearance.radius (sm, md, lg)
Font family--wocha-font-family
Light / dark modeappearance.theme

Export as TypeScript, JSON, or raw CSS variables.

Apply in your app

Copy the generated appearance prop into WochaThemeProvider:

import { WochaThemeProvider } from "@wocha/ui";
import "@wocha/ui/styles.css";
 
<WochaThemeProvider appearance={appearance}>
  {children}
</WochaThemeProvider>

Or paste the CSS variables into your stylesheet to override defaults.

Previous

shadcn Components

Next

Component playground

On this page