N4i LogoDocs
API DocsTry Demo

Theming

Customize the look and feel of generated UI with built-in themes or create your own brand theme.

Live Theme Preview

Select a preset theme to see how generated UI will look.

Preview: light theme

Theme Preview

Stats

$45,231

+12.5%
Progress
Completion

Using Preset Themes

N4i comes with 8 built-in themes: light, dark, blue, emerald, violet, rose, orange, and slate.

TypeScript/CSS
import { N4iThemeProvider, N4iRenderer } from "n4i-genui/react";

function App() {
  return (
    // Available: "light", "dark", "blue", "emerald", "violet", "rose", "orange", "slate"
    <N4iThemeProvider theme="dark">
      <N4iRenderer tree={ui} />
    </N4iThemeProvider>
  );
}

// Or use with the Widget
import { N4iWidget } from "n4i-genui/react";

function WidgetExample() {
  return (
    <N4iWidget
      apiKey="..."
      theme="violet"  // Pass theme name directly
    />
  );
}

Creating Custom Brand Themes

Use createBrandTheme to generate a complete theme from your brand colors.

TypeScript/CSS
import { createBrandTheme, N4iThemeProvider } from "n4i-genui/theming";

// Create a theme from your brand colors
const myTheme = createBrandTheme({
  brand: {
    name: "MyCompany",
    primaryColor: "#6366f1",     // Your main brand color
    secondaryColor: "#22c55e",   // Secondary color
    accentColor: "#f59e0b",      // Accent color (optional)
  },
  typography: {
    fontFamily: "Inter, sans-serif",
    headingFontFamily: "Cal Sans, sans-serif",
    monoFontFamily: "JetBrains Mono, monospace",
  },
  appearance: {
    mode: "dark",                // "light", "dark", or "system"
    borderRadius: "lg",          // "none", "sm", "md", "lg", "xl", "full"
    shadowIntensity: "normal",   // "none", "subtle", "normal", "strong"
  },
});

function App() {
  return (
    <N4iThemeProvider theme={myTheme}>
      <YourApp />
    </N4iThemeProvider>
  );
}

Theme Toggle Hook

Use the useN4iTheme hook to toggle themes and access theme state.

TypeScript/CSS
import { useN4iTheme, N4iThemeProvider } from "n4i-genui/react";

function ThemeToggle() {
  const {
    theme,          // Current theme object
    setTheme,       // Set a new theme
    toggleDarkMode, // Toggle between light/dark
    isDarkMode,     // Boolean for current mode
  } = useN4iTheme();

  return (
    <div className="flex items-center gap-4">
      {/* Simple Toggle */}
      <button onClick={toggleDarkMode}>
        {isDarkMode ? "🌞 Light" : "🌙 Dark"}
      </button>

      {/* Theme Selector */}
      <select onChange={(e) => setTheme(e.target.value as any)}>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="blue">Blue</option>
        <option value="violet">Violet</option>
      </select>
    </div>
  );
}

// Wrap your app with the provider
function App() {
  return (
    <N4iThemeProvider 
      theme="dark"
      enableSystemTheme={true}     // Auto-detect system preference
      storageKey="my-app-theme"    // Persist preference
    >
      <Header>
        <ThemeToggle />
      </Header>
      <YourContent />
    </N4iThemeProvider>
  );
}

WCAG Color Utilities

Generate accessible color palettes and check contrast ratios programmatically.

TypeScript/CSS
import {
  generateAccessiblePalette,
  getAccessibleTextColor,
  getContrastRatio,
  meetsWCAGAA,
  meetsWCAGAAA,
  darkenColor,
  lightenColor,
} from "n4i-genui/client";

// Generate a complete accessible palette from your brand color
const palette = generateAccessiblePalette("#7226E0");
console.log(palette);
// {
//   primary: "#7226E0",
//   primaryHover: "#611fbe",
//   primaryText: "#ffffff",    // Best text color for contrast
//   accent: "#a06aeb",
//   accentHover: "#8c4de6",
//   accentText: "#000000",
//   sparkleMain: "#7226E0",
//   sparkleGlow: "#c1a3f2",
// }

// Get best text color for any background
const textColor = getAccessibleTextColor("#ffcc00");
// Returns "#000000" (black has better contrast on yellow)

// Check contrast ratios
const ratio = getContrastRatio("#7226E0", "#ffffff");
// Returns ~6.2:1

// Check accessibility compliance
const isAA = meetsWCAGAA("#7226E0", "#ffffff");     // true (≥4.5:1)
const isAAA = meetsWCAGAAA("#7226E0", "#ffffff");   // false (needs ≥7:1)

// Color manipulation
const darker = darkenColor("#7226E0", 20);   // "#5b1eb3"
const lighter = lightenColor("#7226E0", 30); // "#9d5fe9"

Accessibility Matters

Generated UI automatically uses these utilities to ensure text is readable against any background color. Custom themes also benefit from automatic contrast checking.

Full Theme Customization

For complete control, create a theme from scratch using createTheme.

TypeScript/CSS
import { createTheme, N4iThemeProvider } from "n4i-genui/theming";

const customTheme = createTheme({
  name: "my-custom-theme",
  version: "1.0.0",
  darkMode: true,
  
  colors: {
    // Base colors
    background: "hsl(222 47% 6%)",
    foreground: "hsl(210 40% 98%)",
    card: "hsl(222 47% 8%)",
    cardForeground: "hsl(210 40% 98%)",
    
    // Brand colors
    primary: "hsl(262 83% 58%)",         // Purple
    primaryForeground: "hsl(0 0% 100%)",
    secondary: "hsl(217 33% 17%)",
    secondaryForeground: "hsl(210 40% 98%)",
    accent: "hsl(160 84% 39%)",          // Emerald
    accentForeground: "hsl(0 0% 100%)",
    
    // Semantic colors
    destructive: "hsl(0 84% 60%)",
    destructiveForeground: "hsl(0 0% 100%)",
    success: "hsl(142 71% 45%)",
    warning: "hsl(45 93% 47%)",
    info: "hsl(199 89% 48%)",
    
    // UI elements
    border: "hsl(217 33% 17%)",
    input: "hsl(217 33% 17%)",
    ring: "hsl(262 83% 58%)",
  },
  
  // Typography
  fontFamily: '"DM Sans", sans-serif',
  headingFontFamily: '"DM Sans", sans-serif',
  monoFontFamily: '"JetBrains Mono", monospace',
  
  fontSize: {
    xs: "0.75rem",
    sm: "0.875rem",
    base: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
  },
  
  // Border radius
  borderRadius: {
    none: "0",
    sm: "0.25rem",
    md: "0.5rem",
    lg: "0.75rem",
    xl: "1rem",
    "2xl": "1.5rem",
    full: "9999px",
  },
  
  // Chart colors
  chartColors: [
    "#8b5cf6",  // violet
    "#10b981",  // emerald  
    "#f59e0b",  // amber
    "#ef4444",  // red
    "#3b82f6",  // blue
    "#ec4899",  // pink
  ],
});

function App() {
  return (
    <N4iThemeProvider theme={customTheme}>
      <YourApp />
    </N4iThemeProvider>
  );
}

CSS Variables

N4i themes are applied via CSS custom properties, making them easy to override or extend.

TypeScript/CSS
/* These CSS variables are automatically set by N4iThemeProvider */

.n4i-themed {
  /* Colors */
  --n4i-background: hsl(222 47% 6%);
  --n4i-foreground: hsl(210 40% 98%);
  --n4i-primary: hsl(262 83% 58%);
  --n4i-primary-foreground: hsl(0 0% 100%);
  --n4i-card: hsl(222 47% 8%);
  --n4i-border: hsl(217 33% 17%);
  /* ... more colors */

  /* Typography */
  --n4i-font-family: "DM Sans", sans-serif;
  --n4i-heading-font-family: "DM Sans", sans-serif;
  --n4i-mono-font-family: "JetBrains Mono", monospace;
  
  /* Border radius */
  --n4i-radius-sm: 0.25rem;
  --n4i-radius-md: 0.5rem;
  --n4i-radius-lg: 0.75rem;
  
  /* Shadows */
  --n4i-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --n4i-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  
  /* Chart colors */
  --n4i-chart-1: #8b5cf6;
  --n4i-chart-2: #10b981;
  --n4i-chart-3: #f59e0b;
  /* ... more chart colors */
}

/* Override in your CSS */
.my-app .n4i-themed {
  --n4i-primary: #ff6b6b;
  --n4i-border-radius: 0.5rem;
}

Next Steps