Ant Design

@theme-kit/antd

AN Ant DesignReactConfigProviderToken

Drive Ant Design's config-based theming from Theme Kit semantic tokens, rebuilt on every theme change.

Installation

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

bash

pnpm add @theme-kit/antd

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 { AntdThemeProvider } from "@theme-kit/antd";
3
4function Zone() {
5  const runtime = useThemeRuntime();
6  return (
7    <AntdThemeProvider runtime={runtime}>
8      <YourApp />
9    </AntdThemeProvider>
10  );
11}
12
13export function App() {
14  return (
15    <ThemeProvider>
16      <Zone />
17    </ThemeProvider>
18  );
19}

What's Available

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

Generate a `ThemeConfig` from concrete tokens at build time.

Build a static AntD config

import { createAntdTheme } from "@theme-kit/antd";

const config = createAntdTheme({ family: "plum", mode: "dark" });

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static config

import { createAntdTheme } from "@theme-kit/antd";

const config = createAntdTheme({ family: "plum", mode: "dark" });

API Reference

Provider

Export	Description
`AntdThemeProvider`	Wraps Ant Design's `ConfigProvider` with a `theme` derived from Theme Kit semantic tokens.
`useAntdTheme(runtime)`	Subscribes to a Theme Kit runtime and returns an AntD `ThemeConfig` on changes.

Create

Export	Description
`createAntdTheme(source)`	Builds an Ant Design `ThemeConfig` from a theme definition or source.
`buildAntdConfig(theme)`	Maps an `AdapterResolvedTheme` to AntD token configuration (colorPrimary, borderRadius, etc.).

Registry

Export	Description
`createAntdAdapter(options)`	Framework-neutral `ThemeAdapter` you register via `runtime.adapters.use()` — alternative to the provider, for use outside React.
`ANTD_ADAPTER_ID`	The registry id (`"antd"`) used to identify and replace the adapter.
`CreateAntdAdapterOptions`	Options for the registry adapter — including `strategy` for how faithfully tokens map onto Ant Design's config.
`AntdAdapterOptions`	Base adapter options type (strategy + defaults) used by both the provider and the registry adapter.