Theming & Customization - TypeScript UI

TypeScript UI components are built with Tailwind CSS, making them highly customizable through class overrides, CSS variables, and theme configuration.

Dark Mode

All components support dark mode out of the box using Tailwind's dark: prefix. Dark mode is controlled by the selector strategy, meaning it activates when the dark class is present on a parent element (typically <html>).

Implementation

// Components automatically adapt to dark mode
<FeatureCard
  icon={<Icon />}
  title="Feature"
  description="This card supports dark mode automatically."
/>

Toggle Dark Mode

function ThemeToggle() {
  const toggleDarkMode = () => {
    document.documentElement.classList.toggle('dark');
  };

  return (
    <button onClick={toggleDarkMode}>
      Toggle Dark Mode
    </button>
  );
}

Color Customization

Using className Props

Most components accept a className prop for direct styling:

<PricingCard
  className="border-purple-500 bg-purple-50 dark:bg-purple-950"
  // ... other props
/>

<CTAWithBackground
  className="from-purple-600 to-pink-600"
  variant="gradient"
  // ... other props
/>

Tailwind Config

Extend your Tailwind configuration to define custom colors:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7',
          900: '#0c4a6e',
        },
      },
    },
  },
}

Then use in components:

<FeatureCard
  className="bg-brand-50 dark:bg-brand-900"
  // ...
/>

CSS Variables

Define CSS variables for consistent theming across your app:

/* globals.css */
:root {
  --primary: 14 165 233; /* sky-500 */
  --primary-foreground: 255 255 255;
  --accent: 99 102 241; /* indigo-500 */
}

.dark {
  --primary: 56 189 248; /* sky-400 */
  --primary-foreground: 15 23 42;
  --accent: 129 140 248; /* indigo-400 */
}

Use with Tailwind's arbitrary value syntax:

<button className="bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))]">
  Themed Button
</button>

Component Variants

Many components support variant props for built-in style variations:

CTAWithBackground

<CTAWithBackground variant="solid" />   // Solid background
<CTAWithBackground variant="gradient" /> // Gradient background
<CTAWithBackground variant="image" />    // Image with overlay

FeatureGrid

<FeatureGrid columns={2} alignment="left" />
<FeatureGrid columns={3} alignment="center" />
<FeatureGrid columns={4} alignment="left" />

FeatureIconList

<FeatureIconList variant="large" />  // Large icons
<FeatureIconList variant="inline" /> // Inline icons

Overriding Styles

For deep customization, you can override component styles using Tailwind's !important modifier or by wrapping components:

// Using important modifier
<FeatureCard className="!bg-slate-100 !border-slate-300" />

// Wrapping with custom styles
<div className="[&_.feature-icon]:bg-purple-500">
  <FeatureCard icon={<Icon />} />
</div>

Responsive Design

Components are mobile-first and responsive. Override breakpoints as needed:

<FeatureGrid
  columns={2} // Base: 2 columns
  className="lg:grid-cols-4" // Override to 4 on large screens
/>

Typography

Components use these Tailwind typography classes by default:

Element	Classes
Headings	`text-slate-900 dark:text-white font-semibold`
Body	`text-slate-600 dark:text-slate-400`
Small text	`text-sm`
Taglines	`text-sky-700 dark:text-sky-300`

Override with the className prop or by configuring Tailwind's typography plugin.