React
@themvora/react
SPAViteContext11 exports
Provider + hooks for React 18/19. The reference integration, and the base that Next.js and Remix re-export.
Verified with Themvora 2.0.0·Updated 2026-09-17
Prerequisites
Package Manager
npm, pnpm, yarn, or bun
Dependencies
@themvora/core (peer dependency)
Use Case
React projects with theme support
Installation
Install the integration — @themvora/core is pulled in automatically as a dependency.
pnpm add @themvora/reactQuick Start
Complete copy-paste usage for this package.
import { createRoot } from "react-dom/client";
import { ThemeProvider, useTheme } from "@themvora/react";
// Application UI. It reads the runtime the provider above it establishes.
function App() {
const { theme, family } = useTheme();
return (
<main>
{theme.name} · {family}
</main>
);
}
createRoot(document.getElementById("root")!).render(
<ThemeProvider transition={{ enabled: true }}>
<App />
</ThemeProvider>,
);More Examples
Additional patterns for React.
import { ThemeScope } from "@themvora/react";
import type { ThemeTransitionOptions } from "@themvora/core";
const scopeTransition: ThemeTransitionOptions = { duration: 300, easing: "ease" };
// Apply a specific theme to just this subtree
<ThemeScope theme="plum-dark" transition={scopeTransition}>
<Card />
</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. |