Themvora + Chakra UI

@themvora/chakra

Generated themeReactSystemProvider

Bootstrap a Chakra UI system from Themvora semantic tokens, rebuilt automatically as themes change.

Verified with Themvora 2.0.0·Updated 2026-09-17

Pick your framework

The adapter derives a Chakra UI theme from Themvora semantic tokens and connects it to Chakra UI's own theme system. Pick the framework you are building in — every snippet below follows that choice.

Installation

Two installs. The first is Chakra UI's own — see its installation guide if you need more than this. The second is Themvora, and it names the runtime package for React.

1. Install Chakra UI

bash

pnpm add @chakra-ui/react @emotion/react

2. Install Themvora

bash

pnpm add @themvora/core @themvora/react @themvora/chakra

How it works

Themvora builds Chakra UI's own theme object from its tokens and hands it to Chakra UI's provider. The library keeps doing exactly what it always did — it just gets its theme from Themvora instead of from you. That is why this adapter is a provider component: there is a real theme object to hand over.

Quick Start

Chakra UI wired up for React. Switch the picker above and everything below changes with it.

TSX

import type { ReactNode } from "react";
import { useThemeRuntime } from "@themvora/react";
import { ChakraThemeProvider } from "@themvora/chakra";

// Rebuilds the library's native theme on every change.
export function ThemeZone({ children }: { children: ReactNode }) {
  const runtime = useThemeRuntime();
  return <ChakraThemeProvider runtime={runtime}>{children}</ChakraThemeProvider>;
}

Mount the provider

Themvora's provider owns the active theme. Drop this at your app root — everything below it can read and change the theme, and the bridge above picks up each change automatically.

TSX / JSX

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

import { Page } from "./Page";
import { ThemeZone } from "./components/ThemeZone";

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <ThemeZone>
        <Page />
      </ThemeZone>
    </ThemeProvider>
  );
}

Use Chakra UI components

TSX / JSX

import { Box, Button, Heading } from "@chakra-ui/react";

export function Example() {
  return (
    <Box p="6" borderWidth="1px" borderRadius="lg">
      <Heading size="md">Themvora + Chakra UI</Heading>
      <Button colorPalette="primary">Primary action</Button>
    </Box>
  );
}

These are ordinary Chakra UI components. No Themvora-specific props are required — the theme reaches them through Chakra UI's own mechanism.

Theme switching

The point of an adapter is that this is the only code that changes — the components stay exactly as they are.

TSX / JSX

import { useTheme } from "@themvora/react";
import { Button, Stack } from "@chakra-ui/react";

export function ThemeControls() {
  const { setMode, toggleTheme } = useTheme();

  return (
    <Stack direction="row" spacing={1}>
      <Button onClick={toggleTheme}>Toggle</Button>
      <Button onClick={() => setMode("light")}>Light</Button>
      <Button onClick={() => setMode("dark")}>Dark</Button>
    </Stack>
  );
}

Before and after

Without Themvora

You own the theme object. You choose the colours, keep them in step with your design tokens by hand, write the dark variant yourself, and rebuild the object whenever anything changes. Every new token has to be added twice — once to your design system and once to Chakra UI.

With Themvora

Themvora owns the theme. The adapter derives the Chakra UItheme from Themvora's tokens and rebuilds it whenever the active theme changes — switching family or mode, or a persisted preference resolving on load. There is no second place to update, because there is no second theme.

Your components stay Chakra UI components. Themvora becomes the source of the active theme.

A complete example

Everything together for React. Paste it in and it runs.

TSX / JSX

import { ThemeProvider, useThemeRuntime } from "@themvora/react";
import { ChakraThemeProvider } from "@themvora/chakra";

import { Example } from "./Example";

// The bridge rebuilds Chakra UI's theme whenever Themvora's active theme changes.
function ThemeZone() {
  const runtime = useThemeRuntime();

  return (
    <ChakraThemeProvider runtime={runtime}>
      <Example />
    </ChakraThemeProvider>
  );
}

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <ThemeZone />
    </ThemeProvider>
  );
}

What gets mapped

Themvora owns the meaning; the adapter owns the vocabulary.

Themvora	Chakra UI
primary	colors.primary (50–950 scale)
primaryForeground	colors.primary.contrast
background	colors.background
foreground	colors.foreground
card	colors.card
muted	colors.muted
mutedForeground	colors.mutedForeground
border	colors.border
ring	colors.ring
radius	radii.lg

Prerequisites

Core Package

@themvora/core (peer dependency)

Library Version

Compatible with Chakra UI v3+

Adapter Type

Generated Theme

What's Available

@themvora/chakra ships 8 exports in 3 categories. Click any export to reveal what it does and how to use it.

Provider

Create

Registry

Use Cases

The important features in practice — copy any of these straight into your app.

Build a static Chakra system

Turn a theme definition into a Chakra system at build time.

Build a static Chakra system

TS / JS

import { createChakraTheme } from "@themvora/chakra";
import { getBuiltInThemes, resolveTheme } from "@themvora/core";

// Pass a theme definition, not { family, mode } — the factory does not read that shape.
const themes = getBuiltInThemes();
const system = createChakraTheme(resolveTheme(themes, "mint-light"));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static theme

import { createChakraTheme } from "@themvora/chakra";
import { getBuiltInThemes } from "@themvora/core";

const themes = getBuiltInThemes();
const theme = themes.find((t) => t.name === "mint-dark")!;

const system = createChakraTheme(theme);

API Reference

Provider

Export	Description
`ChakraThemeProvider`	Wraps Chakra's `ChakraProvider` with a system derived from Themvora semantic tokens.
`useChakraTheme(runtime)`	Subscribes to a Themvora runtime and returns a Chakra `system` rebuilt on theme changes.

Create

Export	Description
`createChakraTheme(source)`	Builds a Chakra UI system from a theme definition, its tokens, or a runtime.
`buildChakraConfig(theme)`	Maps an `AdapterResolvedTheme` to a Chakra `SystemStyleObject`/config shape.

Registry

Export	Description
`createChakraAdapter(options)`	Framework-neutral `ThemeAdapter` you register via `runtime.adapters.use()` — alternative to the provider, for use outside React.
`CHAKRA_ADAPTER_ID`	The registry id (`"chakra"`) used to identify and replace the adapter.
`CreateChakraAdapterOptions`	Options for the registry adapter — including `strategy` for how faithfully tokens map onto Chakra's system.
`ChakraAdapterOptions`	Base adapter options type (strategy + defaults) used by both the provider and the registry adapter.

Next steps

Compatibility Check

Verify framework and library version compatibility

→

Browse Components

See all Chakra UI components with theming

→

Migration Guide

Upgrade from previous adapter versions

→

Themvora + Chakra UI

@themvora/chakra

Generated themeReactSystemProvider

Bootstrap a Chakra UI system from Themvora semantic tokens, rebuilt automatically as themes change.

Verified with Themvora 2.0.0·Updated 2026-09-17

Pick your framework

Installation

Two installs. The first is Chakra UI's own — see its installation guide if you need more than this. The second is Themvora, and it names the runtime package for React.

1. Install Chakra UI

bash

pnpm add @chakra-ui/react @emotion/react

2. Install Themvora

bash

pnpm add @themvora/core @themvora/react @themvora/chakra

How it works

Quick Start

Chakra UI wired up for React. Switch the picker above and everything below changes with it.

TSX

import type { ReactNode } from "react";
import { useThemeRuntime } from "@themvora/react";
import { ChakraThemeProvider } from "@themvora/chakra";

// Rebuilds the library's native theme on every change.
export function ThemeZone({ children }: { children: ReactNode }) {
  const runtime = useThemeRuntime();
  return <ChakraThemeProvider runtime={runtime}>{children}</ChakraThemeProvider>;
}

Mount the provider

Themvora's provider owns the active theme. Drop this at your app root — everything below it can read and change the theme, and the bridge above picks up each change automatically.

TSX / JSX

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

import { Page } from "./Page";
import { ThemeZone } from "./components/ThemeZone";

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <ThemeZone>
        <Page />
      </ThemeZone>
    </ThemeProvider>
  );
}

Use Chakra UI components

TSX / JSX

import { Box, Button, Heading } from "@chakra-ui/react";

export function Example() {
  return (
    <Box p="6" borderWidth="1px" borderRadius="lg">
      <Heading size="md">Themvora + Chakra UI</Heading>
      <Button colorPalette="primary">Primary action</Button>
    </Box>
  );
}

These are ordinary Chakra UI components. No Themvora-specific props are required — the theme reaches them through Chakra UI's own mechanism.

Theme switching

The point of an adapter is that this is the only code that changes — the components stay exactly as they are.

TSX / JSX

import { useTheme } from "@themvora/react";
import { Button, Stack } from "@chakra-ui/react";

export function ThemeControls() {
  const { setMode, toggleTheme } = useTheme();

  return (
    <Stack direction="row" spacing={1}>
      <Button onClick={toggleTheme}>Toggle</Button>
      <Button onClick={() => setMode("light")}>Light</Button>
      <Button onClick={() => setMode("dark")}>Dark</Button>
    </Stack>
  );
}

Before and after

Without Themvora

With Themvora

Your components stay Chakra UI components. Themvora becomes the source of the active theme.

A complete example

Everything together for React. Paste it in and it runs.

TSX / JSX

import { ThemeProvider, useThemeRuntime } from "@themvora/react";
import { ChakraThemeProvider } from "@themvora/chakra";

import { Example } from "./Example";

// The bridge rebuilds Chakra UI's theme whenever Themvora's active theme changes.
function ThemeZone() {
  const runtime = useThemeRuntime();

  return (
    <ChakraThemeProvider runtime={runtime}>
      <Example />
    </ChakraThemeProvider>
  );
}

export default function App() {
  return (
    <ThemeProvider defaultTheme="plum-light" initialMode="system">
      <ThemeZone />
    </ThemeProvider>
  );
}

What gets mapped

Themvora owns the meaning; the adapter owns the vocabulary.

Themvora	Chakra UI
primary	colors.primary (50–950 scale)
primaryForeground	colors.primary.contrast
background	colors.background
foreground	colors.foreground
card	colors.card
muted	colors.muted
mutedForeground	colors.mutedForeground
border	colors.border
ring	colors.ring
radius	radii.lg

Prerequisites

Core Package

@themvora/core (peer dependency)

Library Version

Compatible with Chakra UI v3+

Adapter Type

Generated Theme

What's Available

@themvora/chakra ships 8 exports in 3 categories. Click any export to reveal what it does and how to use it.

Provider

Create

Registry

Use Cases

The important features in practice — copy any of these straight into your app.

Build a static Chakra system

Turn a theme definition into a Chakra system at build time.

Build a static Chakra system

TS / JS

import { createChakraTheme } from "@themvora/chakra";
import { getBuiltInThemes, resolveTheme } from "@themvora/core";

// Pass a theme definition, not { family, mode } — the factory does not read that shape.
const themes = getBuiltInThemes();
const system = createChakraTheme(resolveTheme(themes, "mint-light"));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static theme

import { createChakraTheme } from "@themvora/chakra";
import { getBuiltInThemes } from "@themvora/core";

const themes = getBuiltInThemes();
const theme = themes.find((t) => t.name === "mint-dark")!;

const system = createChakraTheme(theme);

API Reference

Provider

Export	Description
`ChakraThemeProvider`	Wraps Chakra's `ChakraProvider` with a system derived from Themvora semantic tokens.
`useChakraTheme(runtime)`	Subscribes to a Themvora runtime and returns a Chakra `system` rebuilt on theme changes.

Create

Export	Description
`createChakraTheme(source)`	Builds a Chakra UI system from a theme definition, its tokens, or a runtime.
`buildChakraConfig(theme)`	Maps an `AdapterResolvedTheme` to a Chakra `SystemStyleObject`/config shape.

Registry

Export	Description
`createChakraAdapter(options)`	Framework-neutral `ThemeAdapter` you register via `runtime.adapters.use()` — alternative to the provider, for use outside React.
`CHAKRA_ADAPTER_ID`	The registry id (`"chakra"`) used to identify and replace the adapter.
`CreateChakraAdapterOptions`	Options for the registry adapter — including `strategy` for how faithfully tokens map onto Chakra's system.
`ChakraAdapterOptions`	Base adapter options type (strategy + defaults) used by both the provider and the registry adapter.

Next steps

Compatibility Check

Verify framework and library version compatibility

→

Browse Components

See all Chakra UI components with theming

→

Migration Guide

Upgrade from previous adapter versions

→

Pick your framework

Installation

How it works

Quick Start

Mount the provider

Use Chakra UI components

Theme switching

Before and after

A complete example

What gets mapped

What's Available

Provider

Create

Registry

Use Cases

Build a static Chakra system

More Examples

API Reference

Provider

Create

Registry

Next steps

Related documentation

Pick your framework

Installation

How it works

Quick Start

Mount the provider

Use Chakra UI components

Theme switching

Before and after

A complete example

What gets mapped

What's Available

Provider

Create

Registry

Use Cases

Build a static Chakra system

More Examples

API Reference

Provider

Create

Registry

Next steps

Related documentation