Configuration

Customize UI Lab to fit your project’s design requirements and preferences.

Basic Configuration

Create a ui-lab.config.js file in your project root:

export default {
  theme: {
    primary: '#3b82f6',
    secondary: '#64748b',
    accent: '#f59e0b',
    neutral: '#374151',
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
  },
  darkMode: 'class', // 'class' | 'media' | false
  prefix: 'ui-',
  borderRadius: {
    small: '4px',
    medium: '8px',
    large: '12px',
  },
  spacing: {
    scale: 1.2,
    base: '16px',
  }
};

Theme Customization

Color Palette

Define your brand colors:

export default {
  theme: {
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        500: '#3b82f6',
        900: '#1e3a8a',
      },
      // Custom color scales
      brand: '#ff6b35',
      accent: '#4ecdc4',
    }
  }
};

Typography

Customize fonts and text scales:

export default {
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      heading: ['Poppins', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
    }
  }
};

Dark Mode

Enable dark mode support:

Class-based (Recommended)

export default {
  darkMode: 'class'
};

Add the dark mode toggle:

// Toggle dark mode
document.documentElement.classList.toggle('dark');

Media Query-based

export default {
  darkMode: 'media'
};

Component Defaults

Override default component props:

export default {
  components: {
    Button: {
      variant: 'primary',
      size: 'medium',
      rounded: true,
    },
    Card: {
      shadow: 'medium',
      padding: 'large',
    }
  }
};

CSS Variables

UI Lab generates CSS custom properties for easy runtime theming:

:root {
  --ui-color-primary: #3b82f6;
  --ui-color-secondary: #64748b;
  --ui-spacing-base: 16px;
  --ui-border-radius: 8px;
}

/* Dark mode overrides */
.dark {
  --ui-color-primary: #60a5fa;
  --ui-color-secondary: #94a3b8;
}

Environment-specific Configuration

Development

export default {
  debug: true,
  warnings: true,
  devtools: true,
};

Production

export default {
  debug: false,
  warnings: false,
  minify: true,
  purge: true,
};

Ready to start building? Check out our component library next!