Skip to main content
Version: 1.0.3

Quick Start: Theming in 5 Minutes

Welcome to Ignix UI Theming! This guide will get you up and running with a fully functional, multi-theme setup in your React application in just a few minutes. This single package includes the core ThemeProvider, all theme-related components like ThemeSwitcher, and the entire library of 200+ preset themes.

Basic Usage​

1. Add ThemeProvider​

Wrap your application with the ThemeProvider component to enable theming throughout your app:

// our layout component or entrypoint of app
import { ThemeProvider } from '@mindfiredigital/ignix-ui';

function Layout() {
  return (
    <ThemeProvider defaultThemeId="cyberpunk-neon">
      {children}
    </ThemeProvider>
  );
}

export default Layout;

2. Add Theme Switcher​

Add the ThemeSwitcher component to allow users to change themes:

import { ThemeSwitcher } from '@mindfiredigital/ignix-ui';
import { Button } from '@components/ui/Button';
import { Card } from '@components/ui/Card';

export default function YourAppComponent() {
  return (
    <div className="p-8">
      <header className="flex justify-between items-center mb-8">
        <h1 className="text-2xl font-bold">My Awesome App</h1>
        <ThemeSwitcher layout="dropdown" />
      </header>
      
      <Card>
        <h2 className="text-xl mb-4">Welcome!</h2>
        <p className="mb-4">
          Try changing the theme using the dropdown in the header.
        </p>
        <Button>Click Me</Button>
      </Card>
    </div>
  );
}

Next Steps​

  • 🎨 Style Your Own Components: Learn how to use theme variables in your components
  • 🧙‍♂️ Create Custom Themes: Build your own unique themes
  • 📚 Explore the API: Check out all available theming options

Next​