Wocha Docs

Live preview

Real @wocha/ui components styled with your configuration.

SignIn

Sign in to continue

Welcome back. Sign in to access your account.

SignUp

Create your account

Get started with Wocha in seconds.

UserButton

OrgSwitcher

Generated code

Copy the appearance object for WochaThemeProvider, or use the CSS variables directly.

appearance prop (TypeScript)

const appearance = {
  theme: "dark",
  variables: {
    "--wocha-color-primary": "#d4af37",
    "--wocha-color-background": "#1c1917",
    "--wocha-color-foreground": "#fafaf9",
    "--wocha-color-card": "#292524",
    "--wocha-color-muted": "#292524",
    "--wocha-color-border": "#44403c",
    "--wocha-color-destructive": "#ef4444",
  },
};

<WochaThemeProvider appearance={appearance}>
  {/* your app */}
</WochaThemeProvider>

appearance object (JSON)

{
  "appearance": {
    "variables": {
      "--wocha-color-primary": "#d4af37",
      "--wocha-color-background": "#1c1917",
      "--wocha-color-foreground": "#fafaf9",
      "--wocha-color-card": "#292524",
      "--wocha-color-muted": "#292524",
      "--wocha-color-border": "#44403c",
      "--wocha-color-destructive": "#ef4444"
    },
    "theme": "dark"
  }
}

CSS variables

.wocha-root {
  --wocha-color-primary: #d4af37;
  --wocha-color-background: #1c1917;
  --wocha-color-foreground: #fafaf9;
  --wocha-color-card: #292524;
  --wocha-color-muted: #292524;
  --wocha-color-border: #44403c;
  --wocha-color-destructive: #ef4444;
  --wocha-color-card-foreground: #fafaf9;
  --wocha-color-primary-foreground: #1c1917;
  --wocha-color-secondary: #44403c;
  --wocha-color-secondary-foreground: #fafaf9;
  --wocha-color-muted-foreground: #a8a29e;
  --wocha-color-accent: #d4af37;
  --wocha-color-accent-foreground: #1c1917;
  --wocha-color-ring: #d4af37;
  --wocha-color-destructive-foreground: #ffffff;
  --wocha-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wocha-radius-sm: 0.375rem;
  --wocha-radius-md: 0.5rem;
  --wocha-radius-lg: 0.75rem;
  --wocha-radius: var(--wocha-radius-md);
  --wocha-font-size-sm: 0.875rem;
  --wocha-font-size-md: 1rem;
  --wocha-font-size-lg: 1.125rem;
  --wocha-font-size-base: var(--wocha-font-size-md);
  --wocha-spacing-xs: 0.25rem;
  --wocha-spacing-sm: 0.5rem;
  --wocha-spacing-md: 1rem;
  --wocha-spacing-lg: 1.5rem;
  --wocha-spacing-xl: 2rem;
  --wocha-font-weight-normal: 400;
  --wocha-font-weight-medium: 500;
  --wocha-font-weight-semibold: 600;
  --wocha-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --wocha-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --wocha-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}