React

@theme-kit/react

SPAViteContext11 exports

Provider + hooks for React 18/19. The reference integration, and the base that Next.js and Remix re-export.

Installation

Install the integration alongside @theme-kit/core.

bash

pnpm add @theme-kit/react

Quick Start

Complete copy-paste usage for this package.

App.tsx

tsx

1import { ThemeProvider, useTheme } from "@theme-kit/react";
2
3export function App() {
4  return (
5    <ThemeProvider themes={themes} transition={{ enabled: true }}>
6      <ThemeSwitcher />
7    </ThemeProvider>
8  );
9}
10
11function ThemeSwitcher() {
12  const { theme, family, setFamily, toggleTheme } = useTheme();
13  return (
14    <button onClick={toggleTheme}>
15      {theme.name} · {family}
16    </button>
17  );
18}

More Examples

Additional patterns for React.

Scoped.tsx

tsx

1import { ThemeScope, type ThemeTransitionOptions } from "@theme-kit/react";
2
3const scopeTransition: ThemeTransitionOptions = { duration: 300, easing: "ease" };
4
5// Apply a specific theme to just this subtree
6<ThemeScope theme="forest" transition={scopeTransition}>
7  <Card />
8</ThemeScope>

API Reference

Curated highlights below. The complete generated reference — every signature, parameter and type — is at /api-reference/react.

Provider

Export	Description
`ThemeProvider`	Creates a runtime, wires DOM + CSS-variable bindings, and provides it via context.
`Runtime injection`	Pass `runtime` to share an instance, or `initial` to seed the server-resolved selection.

Hooks

Export	Description
`useTheme()`	`{ theme, mode, family, setMode, setFamily, toggleTheme }`.
`useThemeValue / useThemeTokens`	The active theme definition / its tokens.
`useThemeMode / useThemeFamily`	Current mode and family.
`useThemeHistory / useThemeTimeTravel`	Undo / redo and time-travel through history.
`useThemeRuntime`	The full runtime instance.

Components

Export	Description
`ThemeScope`	Apply a theme to a subtree with scoped CSS variables.
`ThemeModeButton`	Cycles light → dark → system.
`ThemeInspector`	Floating dev panel showing the active theme and tokens.
`useScopedTheme`	Imperative scoping for any element.