React examples

ThemeProvider

Creates a runtime, installs the DOM and CSS-variable bindings, injects the pre-paint bootstrap script, and publishes the runtime through React context. It accepts every ThemeRuntimeOptions prop plus initialMode and initialFamily.

Once, at the root of the app. Every hook in this package reads the runtime from this context and throws without it, so this is the one non-optional piece.

import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@themvora/react";
import { getBuiltInThemes } from "@themvora/core";
import { App } from "./App";

const themes = getBuiltInThemes();

createRoot(document.getElementById("root")!).render(
  <ThemeProvider
    themes={themes}
    defaultTheme="mint-light"
    initialMode="system"
    transition={{ enabled: true, duration: 250 }}
  >
    <App />
  </ThemeProvider>,
);

The active theme's variables and data-theme appear on <html> before the first paint, and children re-render when the selection changes.

Relatedruntime-injectionuse-theme

runtime / initial

Documents Runtime injection

runtime hands the provider a runtime you already own, so the provider neither creates nor destroys it. initial seeds the selection the server already resolved, so the hydration render matches the server HTML.

Two situations: the runtime has to be reachable outside React (a vanilla widget on the same page, a second root), or the server resolved the selection and recomputing it on the client would produce a different first render.

import { createThemeRuntime, getBuiltInThemes } from "@themvora/core";

export const runtime = createThemeRuntime({
  themes: getBuiltInThemes(),
  defaultTheme: "mint-light",
});

import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@themvora/react";
import { App } from "./App";
import { runtime } from "./theme-runtime";

createRoot(document.getElementById("root")!).render(
  <ThemeProvider runtime={runtime}>
    <App />
  </ThemeProvider>,
);

// `initial` is what the server rendered. Pass the same object to the client
// so hydration matches, instead of letting the client re-derive the selection.
<ThemeProvider runtime={runtime} initial={{ theme, selection }}>
  <App />
</ThemeProvider>

With runtime, unmounting the provider leaves the runtime alive. With initial, React's hydration render equals the server's markup — no theme flicker and no hydration mismatch warning.

Relatedtheme-providercreate-theme-root

scheduled

Documents scheduled prop

Starts a sunrise/sunset driver inside the runtime. Between sunrise and sunset the runtime applies lightTheme; outside it, darkTheme. Coordinates are optional — the visitor's timezone supplies them.

The appearance should follow daylight without asking the visitor, or a kiosk should track local daylight with no interaction at all.

import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@themvora/react";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <ThemeProvider
    initialMode="system"
    scheduled={{ lightTheme: "mint-light", darkTheme: "mint-dark" }}
  >
    <App />
  </ThemeProvider>,
);

import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@themvora/react";
import { App } from "./App";

// Auto-detection reads the browser timezone. Pin it when the app must follow
// a specific place rather than the visitor — a storefront for one city.
createRoot(document.getElementById("root")!).render(
  <ThemeProvider
    scheduled={{
      lightTheme: "mint-light",
      darkTheme: "mint-dark",
      latitude: 27.7172,
      longitude: 85.324,
    }}
  >
    <App />
  </ThemeProvider>,
);

The page changes theme at the visitor's local sunrise and sunset. useThemeMode() keeps reporting what the visitor asked for; useEffectiveThemeMode() follows the sun.

Relateduse-theme-scheduleuse-effective-theme-mode

createThemeRoot()

Creates the runtime, mounts the provider, and flushes the **first** commit synchronously so the browser's first frame is already the themed UI. It returns { root, runtime, unmount }, and its render callback receives the runtime so other providers can be composed around it.

Client-rendered apps where a reload can paint an empty or unthemed frame — reload-sensitive demos, apps whose UI-library provider needs the runtime at composition time. Not for SSR: server HTML must be hydrated, not replaced.

import { createThemeRoot } from "@themvora/react";
import { App } from "./App";

const handle = createThemeRoot({
  container: document.getElementById("root")!,
  defaultTheme: "mint-light",
  initialMode: "system",
  transition: { enabled: true },
  render: () => <App />,
});

// Hot-reload or teardown: unmounts the tree and destroys the runtime.
handle.unmount();

import { createThemeRoot } from "@themvora/react";
import { MuiThemeProvider } from "@themvora/mui";
import { App } from "./App";

createThemeRoot({
  container: document.getElementById("root")!,
  defaultTheme: "mint-light",
  render: ({ runtime }) => (
    <MuiThemeProvider runtime={runtime}>
      <App />
    </MuiThemeProvider>
  ),
});

No flash on reload. Only the first commit is synchronous; later renders keep React's normal concurrent scheduling. Because it mounts the provider itself, do not render a second ThemeProvider inside render.

Relatedstandard-create-rootruntime-injection

createRoot() + ThemeProvider

Documents Standard createRoot()

The plain React entry point. You mount ThemeProvider yourself and React schedules the first commit.

The default. Reach for it unless you have measured a first-frame flash that createThemeRoot removes — most apps are smooth without it, and this keeps the root yours.

import { createRoot } from "react-dom/client";
import { ThemeProvider } from "@themvora/react";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <ThemeProvider defaultTheme="mint-light" initialMode="system">
    <App />
  </ThemeProvider>,
);

Identical theming behaviour; the first commit follows React's concurrent scheduling rather than being forced.

Relatedcreate-theme-roottheme-provider

useTheme()

The aggregate hook: { theme, mode, effectiveMode, family, setMode, setFamily, toggleTheme }. theme is the active theme definition, mode is what the visitor asked for, effectiveMode is what is on screen.

A component needs more than one slice at once — a settings panel, a header that shows the theme name and a toggle. For a single value, the granular hooks below re-render less.

import { useTheme } from "@themvora/react";

export function ThemeSummary() {
  const { theme, mode, effectiveMode, family, setMode, toggleTheme } = useTheme();

  return (
    <section>
      <h2>{theme.name}</h2>
      <p>
        Family {family} · requested {mode} · showing {effectiveMode}
      </p>
      <button onClick={toggleTheme}>Toggle</button>
      <button onClick={() => setMode("system")}>Follow system</button>
    </section>
  );
}

The component re-renders whenever the theme, mode, effective mode or family changes, and the setters immediately update the page.

Relateduse-theme-modeuse-effective-theme-modeuse-set-theme-mode

useThemeValue() / useThemeTokens()

useThemeValue() returns the active theme definition (name, meta, tokens); useThemeTokens() returns just its tokens group, or undefined when the theme declares none.

You need theme data rather than a selection control — rendering the theme's label, computing a chart palette from its tokens, or building a preview card.

import { useThemeTokens, useThemeValue } from "@themvora/react";

export function TokenReadout() {
  const theme = useThemeValue();
  const tokens = useThemeTokens();

  return (
    <dl>
      <dt>Theme</dt>
      <dd>{theme.meta?.label ?? theme.name}</dd>
      <dt>Primary</dt>
      <dd>{tokens?.colors?.primary ?? "not declared"}</dd>
    </dl>
  );
}

Re-renders on every theme change. useThemeTokens() is the cheaper read when the name and metadata are irrelevant.

Relateduse-themeuse-generated-theme

useThemeMode() / useThemeFamily()

Granular reads of the two halves of the selection: the requested mode (light | dark | system) and the active family name.

A three-way mode picker or a family picker needs to know the current selection to mark it — and should not re-render when the theme's tokens change.

import { useThemeFamily, useThemeMode, useSetThemeMode } from "@themvora/react";

const MODES = ["light", "dark", "system"] as const;

export function ModePicker() {
  const mode = useThemeMode();
  const family = useThemeFamily();
  const setMode = useSetThemeMode();

  return (
    <fieldset>
      <legend>Mode for {family}</legend>
      {MODES.map((option) => (
        <label key={option}>
          <input
            type="radio"
            name="mode"
            checked={mode === option}
            onChange={() => setMode(option)}
          />
          {option}
        </label>
      ))}
    </fieldset>
  );
}

Each hook re-renders only when its own value moves. useThemeMode() does not change at a sunrise/sunset transition, which is exactly what a picker needs.

Relateduse-effective-theme-modeuse-set-theme-mode

useEffectiveThemeMode()

Returns the mode actually applied — light or dark, never system. It subscribes to the appearance rather than to the selection.

Anything that states or illustrates the current appearance: a sun/moon icon, a label, an aria-pressed state. Binding those to useThemeMode() is the common bug — with system it never moves.

import { useEffectiveThemeMode } from "@themvora/react";

export function AppearanceIcon() {
  const effectiveMode = useEffectiveThemeMode();

  return (
    <span role="img" aria-label={`${effectiveMode} mode`}>
      {effectiveMode === "dark" ? "🌙" : "☀️"}
    </span>
  );
}

Updates on a click, an OS appearance change, and a sunrise/sunset transition. During SSR it reports what the server rendered, so hydration matches.

Relateduse-theme-modeuse-theme-schedule

useSetThemeMode() / useSetThemeFamily()

Stable setter functions for mode and family. They do not change identity between renders and never cause the calling component to re-render.

A control that only writes — a menu item, a keyboard shortcut handler, an effect that applies a server-decided selection. Reading the value too would make the control re-render on every change.

import { useEffect } from "react";
import { useSetThemeFamily, useSetThemeMode } from "@themvora/react";

export function Shortcuts() {
  const setMode = useSetThemeMode();
  const setFamily = useSetThemeFamily();

  useEffect(() => {
    function onKey(event: KeyboardEvent) {
      if (!event.metaKey && !event.ctrlKey) return;
      if (event.key === "j") setMode("dark");
      if (event.key === "k") setMode("light");
      if (event.key === "p") setFamily("plum");
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [setMode, setFamily]);

  return null;
}

Calling the setter updates the runtime, the DOM and any subscribed component. The component that called the hook does not re-render on its own.

Relateduse-theme-modeuse-toggle-theme

useToggleTheme()

A stable function that flips the applied appearance between light and dark.

A single-button toggle — the overwhelmingly common case. It is the setter form of useEffectiveThemeMode(), so a component that only toggles needs no read at all.

import { useToggleTheme } from "@themvora/react";

export function ToggleButton() {
  const toggleTheme = useToggleTheme();
  return <button onClick={toggleTheme}>Switch theme</button>;
}

The page switches to the other mode and the choice persists like any other selection change.

Relateduse-effective-theme-modetheme-mode-button

useThemeRuntime()

Returns the runtime itself: registry, store, selection, history, lifecycle, plugins and any configured schedule. This is the escape hatch when no hook covers what you need.

You are wiring something Themvora does not ship a hook for — a custom subscription, a UI-library adapter you write yourself, or a plugin installed after mount.

import { useEffect, useState } from "react";
import { useThemeRuntime } from "@themvora/react";

export function RuntimeBadge() {
  const runtime = useThemeRuntime();
  const [count, setCount] = useState(runtime.themes.length);

  useEffect(() => {
    // The registry changes when a pack is installed — the store does not.
    return runtime.registry.subscribe(() => setCount(runtime.themes.length));
  }, [runtime]);

  return <span>{count} theme definitions registered</span>;
}

The runtime object is stable for the life of the provider. Reading from it does not subscribe you to changes; use the runtime's own subscribe methods for that.

Relateduse-theme-lifecyclecss-variable-adapters

useThemeHistory()

Returns { undo, redo, canUndo, canRedo, clear } for the runtime's selection history. Every selection change is recorded automatically.

A theme editor, a live preview, or any surface where the visitor experiments and wants to step back. For read-only consumers this hook is unnecessary — history exists whether you read it or not.

import { useThemeHistory } from "@themvora/react";

export function HistoryControls() {
  const { undo, redo, canUndo, canRedo, clear } = useThemeHistory();

  return (
    <div>
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
      <button onClick={clear} disabled={!canUndo && !canRedo}>Reset history</button>
    </div>
  );
}

undo/redo move the selection; canUndo/canRedo update reactively so the buttons can disable themselves.

Relateduse-theme-time-traveluse-theme-batch

useThemeBatch()

Returns a function that runs its callback with DOM writes and notifications deferred to a single flush. Note the shape: it returns (callback) => void, not a value.

Several changes belong together — set the family and the mode at once, or apply a token patch plus a selection change. Without batching the page renders twice and a transition can start twice.

import { useThemeBatch, useThemeRuntime } from "@themvora/react";

export function ApplyPreset() {
  const batch = useThemeBatch();
  const runtime = useThemeRuntime();

  function applyPreset() {
    // One flush: no half-applied frame between the two writes.
    batch(() => {
      runtime.selection.setFamily("plum");
      runtime.selection.setMode("dark");
    });
  }

  return <button onClick={applyPreset}>Plum, dark</button>;
}

One re-render and one transition for the whole group. Intermediate states are never painted.

Relateduse-theme-historyuse-theme-runtime

useThemeSnapshot() / useThemeRestore()

useThemeSnapshot() returns a function that captures the full runtime state; useThemeRestore() returns a function that re-applies one. The snapshot is a value you can serialise, store, or send.

Named presets the visitor saves, an undo checkpoint around a destructive edit, or a "reset to how it looked" action. History handles step-by-step undo; snapshots handle named states.

import { useState } from "react";
import { useThemeRestore, useThemeSnapshot } from "@themvora/react";

export function SavedLooks() {
  const snapshot = useThemeSnapshot();
  const restore = useThemeRestore();
  const [saved, setSaved] = useState<ReturnType<typeof snapshot> | null>(null);

  return (
    <div>
      <button onClick={() => setSaved(snapshot())}>Save this look</button>
      <button onClick={() => saved && restore(saved)} disabled={!saved}>
        Restore
      </button>
    </div>
  );
}

Restoring replaces the active theme and selection with the captured ones and notifies subscribers once.

Relateduse-theme-historyuse-theme-time-travel

useThemeTimeTravel()

Returns { history, jump } — the full timeline plus indexed navigation. jump(n) goes straight to a point instead of stepping with undo/redo.

A scrubber or a timeline list in a theme editor. When you only need forward/back, useThemeHistory() is the smaller API.

import { useThemeTimeTravel } from "@themvora/react";

export function Timeline() {
  const { history, jump } = useThemeTimeTravel();

  return (
    <ol>
      {history.map((entry, index) => (
        <li key={index}>
          <button onClick={() => jump(index)}>{entry.theme.name}</button>
        </li>
      ))}
    </ol>
  );
}

history updates as entries are recorded; jump moves the selection to that index and notifies subscribers.

Relateduse-theme-historyuse-theme-snapshot

useThemeLifecycle()

Returns { on }, a typed subscription to runtime lifecycle events such as beforeThemeChange and afterPersist. Handlers receive event-specific payloads rather than unknown.

You need to react to a change rather than to state — sending an analytics event, syncing an external store, or writing a value that must not trigger another render.

import { useEffect } from "react";
import { useThemeLifecycle } from "@themvora/react";

export function ThemeAnalytics() {
  const { on } = useThemeLifecycle();

  useEffect(() => {
    return on("afterThemeChange", ({ theme }) => {
      // Fires after the DOM is updated — safe to measure the result.
      window.dispatchEvent(
        new CustomEvent("app:theme-changed", { detail: theme.name }),
      );
    });
  }, [on]);

  return null;
}

The handler runs when the event fires; the returned unsubscribe stops it. Subscribing does not re-render the component.

Relateduse-theme-runtimeuse-theme-batch

useThemePacks()

Returns a function that installs a theme pack into the runtime's registry at runtime — (pack) => void, wrapping runtime.use().

Themes arrive after mount: fetched from an API, generated from a brand colour the visitor picks, or code-split so the initial bundle stays small.

import { useEffect } from "react";
import { useThemePacks } from "@themvora/react";
import { generateTheme } from "@themvora/core";

export function BrandPack({ seed }: { seed: string }) {
  const usePack = useThemePacks();

  useEffect(() => {
    const generated = generateTheme({ seed, family: "brand" });
    // Registering the pair adds a family without changing the selection.
    usePack({ themes: [generated.light, generated.dark] });
  }, [seed, usePack]);

  return null;
}

The registry grows and themes-change-style notifications fire; the active selection is untouched unless the pack defines it. A useProvidedThemes() consumer sees the new families immediately.

Relateduse-theme-runtimeuse-provided-themes

useThemeSchedule()

A reactive view of the sunrise/sunset controller: enabled, active, status, sunrise, sunset, nextTransition, plus enable(), disable() and set(). Returns null when the provider has no scheduled option.

The app offers a "follow daylight" switch, or shows when the next automatic switch happens. If you only want the feature on, the scheduled prop is enough.

import { useThemeSchedule } from "@themvora/react";

export function DaylightSwitch() {
  const schedule = useThemeSchedule();

  // null when <ThemeProvider> was not given a `scheduled` option.
  if (!schedule) return null;

  return (
    <label>
      <input
        type="checkbox"
        checked={schedule.enabled}
        onChange={(event) =>
          event.target.checked ? schedule.enable() : schedule.disable()
        }
      />
      Follow daylight
      {schedule.nextTransition ? (
        <small>Next switch: {schedule.nextTransition.toLocaleTimeString()}</small>
      ) : null}
    </label>
  );
}

State reads update as the sun moves; the returned object is a reactive view, so it is safe to render during SSR and settles after mount.

Relatedscheduled-propuse-effective-theme-mode

useProvidedThemes()

Documents useTheme()

The theme families this provider was given, grouped by family — not the built-in catalogue. Re-runs when the themes prop changes, a pack is installed, or the registry mutates.

Building a family picker that lists what the app actually offers. Hard-coding the family list is how a picker ends up offering a theme the app no longer ships.

import { useProvidedThemes, useSetThemeFamily, useThemeFamily } from "@themvora/react";

export function FamilyPicker() {
  const families = useProvidedThemes();
  const family = useThemeFamily();
  const setFamily = useSetThemeFamily();

  return (
    <select value={family} onChange={(event) => setFamily(event.target.value)}>
      {families.map((entry) => (
        <option key={entry.name} value={entry.name}>
          {entry.name}
        </option>
      ))}
    </select>
  );
}

Returns a stable array instance while nothing changes, so it is safe to map over in render without memoisation tricks.

Relateduse-theme-modeuse-theme-packs

useGeneratedTheme()

Documents useThemeValue() / useThemeTokens()

Returns the theme produced by generateTheme() and registered with the provider — never a shipped preset. Throws when the provider holds no generated theme, or when several are registered and none is active.

A theme studio or brand-onboarding flow needs to read back the theme it generated (its meta, its derived tokens) without keeping a parallel copy in state.

import { useGeneratedTheme } from "@themvora/react";

export function BrandSummary() {
  // Only valid when the provider was given a generateTheme() pair.
  const theme = useGeneratedTheme();

  return (
    <p>
      Generated from {theme.meta?.generation?.seed ?? "an unknown seed"} · primary{" "}
      <code>{theme.tokens?.colors?.primary}</code>
    </p>
  );
}

Re-resolves on registry, store and selection changes. If the generated theme is later removed, the next render raises the documented error instead of returning a stale value.

Relateduse-theme-valueuse-theme-packs

ThemeScope

Applies a theme to a subtree: emits the scoped CSS variables plus Tailwind-compatible --color-* and --radius-* variables on a wrapper element. theme pins an exact theme; family follows the provider's mode unless you pass mode.

A preview panel, a marketing section in a fixed palette, or a code sample that must render in the theme it documents — without touching the app-wide selection.

import { ThemeScope } from "@themvora/react";

export function Preview() {
  return (
    <ThemeScope theme="cocoa-dark" className="rounded-lg p-6">
      <h3>Always cocoa</h3>
      <p>This panel keeps its own theme while the page changes.</p>
    </ThemeScope>
  );
}

// `family` without `mode` flips light/dark with the page — the usual choice
// for a second brand surface rather than a fixed preview.
<ThemeScope family="plum" className="p-6">
  <PricingTable />
</ThemeScope>

Only the wrapped subtree repaints. The global selection is neither read for the scope nor changed by it; transition controls whether the scope animates.

Relateduse-scoped-themetheme-inspector

ThemeModeButton

A <button> that cycles light → dark → system. Its label reads the *effective* mode, and it shows the configured mode alongside while that is system.

Demos, prototypes and settings pages that need a correct mode control immediately. Replace it with your own once you need icons or a three-way segmented control.

import { ThemeModeButton } from "@themvora/react";

export function Settings() {
  return (
    <section>
      <h2>Appearance</h2>
      <ThemeModeButton />
    </section>
  );
}

Each click advances the configured mode; the label follows what is actually on screen, so it stays truthful under a sunrise/sunset schedule.

Relateduse-effective-theme-modeuse-set-theme-mode

ThemeInspector

A floating development panel showing the active theme, the selection, the flattened tokens and the generated CSS variables, live.

Development only. It answers "which token produced this colour" and "is my scoped theme actually applied" without adding a debug page.

import { ThemeInspector } from "@themvora/react";

export function DevTools() {
  if (!import.meta.env.DEV) return null;
  return <ThemeInspector bottom={16} />;
}

A fixed-position panel appears in the corner. It is a development aid, so mount it behind your build's development flag rather than in production.

Relatedtheme-scopeuse-theme-value

useScopedTheme(ref, selection)

Documents useScopedTheme(ref, themeName)

The imperative form of ThemeScope: binds a theme to an element you already have a ref to. The second argument is a theme name, a family name, or { family, mode }; pass null to remove the scope.

The element is not a wrapper you control — a third-party widget's container, a canvas host, an element rendered by a portal.

import { useRef } from "react";
import { useScopedTheme } from "@themvora/react";

export function ChartHost() {
  const ref = useRef<HTMLDivElement>(null);

  // Pinned to one theme; pass `null` to release the scope.
  useScopedTheme(ref, "cocoa-dark");

  return <div ref={ref} />;
}

The element receives the scoped variables and is cleaned up on unmount or when selection becomes null.

Relatedtheme-scope

createMuiAdapter() / createChakraAdapter()

Runtime adapters that map Themvora semantic tokens onto MUI's and Chakra's native theme objects, preserving the framework-neutral runtime contract so the adapter is not tied to React rendering.

You need the derived theme as data — server-side rendering a library theme, generating a static CSS bundle, or driving a library from a non-React surface.

import { createMuiAdapter } from "@themvora/mui";
import { runtime } from "./theme-runtime";

// React-free: produces MUI theme objects from Themvora tokens.
const adapter = createMuiAdapter(runtime);

console.log(adapter.getTheme().palette.primary.main);

// Release the runtime subscription when the adapter is no longer needed.
adapter.dispose();

The adapter subscribes to the runtime and produces a new native theme whenever the active theme changes. It returns a handle you must dispose.

Relatedantd-adaptermantine-adapter

AntdThemeProvider / AntdThemeAdapter

Documents createAntdAdapter() / createMuiAdapter() / createChakraAdapter()

Ant Design's bridge: AntdThemeProvider wraps ConfigProvider with a theme rebuilt from the active Themvora theme, and createAntdAdapter(runtime) exposes the same derivation as a reactive snapshot/subscribe pair.

An Ant Design app that should inherit Themvora's palette instead of maintaining a second ConfigProvider theme by hand.

import { useThemeRuntime } from "@themvora/react";
import { AntdThemeProvider } from "@themvora/antd";

function AntdBridge({ children }: { children: React.ReactNode }) {
  const runtime = useThemeRuntime();
  return <AntdThemeProvider runtime={runtime}>{children}</AntdThemeProvider>;
}

export function App() {
  return (
    <AntdBridge>
      <Dashboard />
    </AntdBridge>
  );
}

Ant Design components repaint when the Themvora theme changes. The provider takes runtime — mount it *inside* ThemeProvider and pass the runtime from useThemeRuntime().

Relatedmui-chakra-adaptercss-variable-adapters

MantineThemeProvider + createMantineTheme()

Mantine's bridge: createMantineTheme(source) rebuilds a native Mantine theme from Themvora tokens, and MantineThemeProvider forces Mantine's color scheme to match the active mode.

A Mantine app that should follow Themvora's selection, including its built-in dark styles. Forcing the scheme is what keeps Mantine's own dark variants in step with effectiveMode.

import { ThemeProvider, useThemeRuntime } from "@themvora/react";
import { MantineThemeProvider } from "@themvora/mantine";

function MantineBridge({ children }: { children: React.ReactNode }) {
  const runtime = useThemeRuntime();
  return (
    <MantineThemeProvider runtime={runtime}>{children}</MantineThemeProvider>
  );
}

import { createMantineTheme } from "@themvora/mantine";
import { getBuiltInThemes } from "@themvora/core";

const [theme] = getBuiltInThemes();
const mantineTheme = createMantineTheme(theme);

Mantine components switch palette and scheme together with Themvora. createMantineTheme also accepts a theme definition or a token group, so it works without a runtime.

Relatedmui-chakra-adapterantd-adapter

CSS-variable adapters (shadcn, Bootstrap, daisyUI, Open Props)

Documents CSS-variable adapters

Four adapters that project Themvora tokens onto a CSS-variable contract instead of a JS theme object. Their factories are React-free; the framework subpaths (/react, /vue, /svelte, /solid, /angular) add lifecycle wiring.

The library reads CSS variables rather than a provider object — shadcn/ui, Bootstrap, daisyUI and Open Props all work this way. Use the subpath hook so the binding is disposed with the component.

import "@themvora/shadcn/shadcn.css";
import { ThemeProvider, useThemeRuntime } from "@themvora/react";
import { useShadcnTheme } from "@themvora/shadcn/react";

function ShadcnBridge({ children }: { children: React.ReactNode }) {
  const runtime = useThemeRuntime();
  // Installs the CSS-variable binding; disposes it on unmount.
  useShadcnTheme(runtime);
  return <>{children}</>;
}

export function App() {
  return (
    <ThemeProvider defaultTheme="mint-light">
      <ShadcnBridge>
        <Dashboard />
      </ShadcnBridge>
    </ThemeProvider>
  );
}

import { createShadcnAdapter } from "@themvora/shadcn/factory";

const adapter = createShadcnAdapter(runtime);
adapter.dispose();

The library's variables track the active theme; no second theme object exists to drift. Import the adapter's stylesheet once, and install the library's own CSS as usual.

Relateduse-theme-runtimemui-chakra-adapter

transition

Documents transition prop

Enables and configures the cross-fade applied when the active theme changes: duration, easing, preset and which properties animate. Enabled by default at 300ms.

Almost always leave it on. Tune it when the default feels slow on a large surface, or pass { enabled: false } for an app that must repaint instantly.

import { ThemeProvider } from "@themvora/react";

<ThemeProvider
  defaultTheme="mint-light"
  transition={{ enabled: true, duration: 250, easing: "ease-in-out" }}
>
  <App />
</ThemeProvider>;

// The runtime animates with CSS transitions, so the platform preference is
// honoured by turning the transition off rather than by a second animation path.
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

<ThemeProvider
  defaultTheme="mint-light"
  transition={{ enabled: !reduceMotion }}
>
  <App />
</ThemeProvider>;

A theme change animates instead of snapping. The prop is live — changing it after mount changes the next transition without a remount.

Relatedsuppress-transitiontheme-provider

runtime.store.set(theme, { suppressTransition: true })

A per-update escape hatch: applies the theme immediately, skipping the configured animation for that one switch.

The first paint after hydration, a screenshot or print path, or a bulk import where animating every step would be noise. Do not disable the transition globally to solve one call site.

import { useThemeRuntime } from "@themvora/react";

export function PrintTheme() {
  const runtime = useThemeRuntime();

  function applyForPrint() {
    const light = runtime.themes.find((theme) => theme.name === "mint-light");
    if (!light) return;
    // No cross-fade: the print path must not capture a mid-transition frame.
    runtime.store.set(light, { suppressTransition: true });
  }

  return <button onClick={applyForPrint}>Prepare for print</button>;
}

That single change is instant; every later change animates with the configured transition again.

Relatedtransition-propuse-theme-runtime