Chakra UI

@theme-kit/chakra

CH Chakra UIReactSystemProvider

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

Installation

Install the adapter alongside @theme-kit/core (or a framework integration that provides the runtime).

bash

pnpm add @theme-kit/chakra

Pick your framework

The adapter is framework-agnostic — it's a hook, composable, directive or custom element depending on your stack. Pick yours to see the native API.

Quick Start

The snippet below uses the framework you picked — switch the picker above to see that framework's native API.

React

tsx

1import { ThemeProvider, useThemeRuntime } from "@theme-kit/react";
2import { ChakraThemeProvider } from "@theme-kit/chakra";
3
4function Zone() {
5  const runtime = useThemeRuntime();
6  return (
7    <ChakraThemeProvider runtime={runtime}>
8      <YourApp />
9    </ChakraThemeProvider>
10  );
11}
12
13export function App() {
14  return (
15    <ThemeProvider>
16      <Zone />
17    </ThemeProvider>
18  );
19}

What's Available

@theme-kit/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

import { createChakraTheme } from "@theme-kit/chakra";

const system = createChakraTheme({ family: "mint", mode: "light" });

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static theme

import { createChakraTheme } from "@theme-kit/chakra";

const system = createChakraTheme({ family: "mint", mode: "dark" });

API Reference

Provider

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

Create

Export	Description
`createChakraTheme(source)`	Builds a Chakra UI system from a theme definition or source.
`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.