Themvora + Ant Design

@themvora/antd

Generated themeReactConfigProviderToken

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

Verified with Themvora 2.0.0·Updated 2026-09-17

Pick your framework

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

Installation

Two installs. The first is Ant Design'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 Ant Design

bash

pnpm add antd

2. Install Themvora

bash

pnpm add @themvora/core @themvora/react @themvora/antd

How it works

Themvora builds Ant Design's own theme object from its tokens and hands it to Ant Design'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

Ant Design 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 { AntdThemeProvider } from "@themvora/antd";

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

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 Ant Design components

TSX / JSX

import { Button, Card, Typography } from "antd";

export function Example() {
  return (
    <Card>
      <Typography.Title level={5}>Themvora + Ant Design</Typography.Title>
      <Button type="primary">Primary action</Button>
    </Card>
  );
}

These are ordinary Ant Design components. No Themvora-specific props are required — the theme reaches them through Ant Design'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 "antd";

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 Ant Design.

With Themvora

Themvora owns the theme. The adapter derives the Ant Designtheme 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 Ant Design 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 { AntdThemeProvider } from "@themvora/antd";

import { Example } from "./Example";

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

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

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	Ant Design
primary	colorPrimary
background	colorBgLayout
card	colorBgBase
popover	colorBgElevated
foreground	colorTextBase
border	colorBorder
destructive	colorError
success	colorSuccess
warning	colorWarning

Prerequisites

Core Package

@themvora/core (peer dependency)

Library Version

Compatible with Ant Design v3+

Adapter Type

Generated Theme

What's Available

@themvora/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

TS / JS

import { createAntdTheme } from "@themvora/antd";
import { getBuiltInThemes, resolveTheme } from "@themvora/core";

const themes = getBuiltInThemes();
const config = createAntdTheme(resolveTheme(themes, "plum-dark"));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static config

import { createAntdTheme } from "@themvora/antd";
import { getBuiltInThemes } from "@themvora/core";

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

const config = createAntdTheme(theme);

API Reference

Provider

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

Create

Export	Description
`createAntdTheme(source)`	Builds an Ant Design `ThemeConfig` from a theme definition, its tokens, or a runtime.
`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.

Next steps

Compatibility Check

Verify framework and library version compatibility

→

Browse Components

See all Ant Design components with theming

→

Migration Guide

Upgrade from previous adapter versions

→

Themvora + Ant Design

@themvora/antd

Generated themeReactConfigProviderToken

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

Verified with Themvora 2.0.0·Updated 2026-09-17

Pick your framework

Installation

Two installs. The first is Ant Design'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 Ant Design

bash

pnpm add antd

2. Install Themvora

bash

pnpm add @themvora/core @themvora/react @themvora/antd

How it works

Quick Start

Ant Design 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 { AntdThemeProvider } from "@themvora/antd";

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

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 Ant Design components

TSX / JSX

import { Button, Card, Typography } from "antd";

export function Example() {
  return (
    <Card>
      <Typography.Title level={5}>Themvora + Ant Design</Typography.Title>
      <Button type="primary">Primary action</Button>
    </Card>
  );
}

These are ordinary Ant Design components. No Themvora-specific props are required — the theme reaches them through Ant Design'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 "antd";

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 Ant Design 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 { AntdThemeProvider } from "@themvora/antd";

import { Example } from "./Example";

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

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

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	Ant Design
primary	colorPrimary
background	colorBgLayout
card	colorBgBase
popover	colorBgElevated
foreground	colorTextBase
border	colorBorder
destructive	colorError
success	colorSuccess
warning	colorWarning

Prerequisites

Core Package

@themvora/core (peer dependency)

Library Version

Compatible with Ant Design v3+

Adapter Type

Generated Theme

What's Available

@themvora/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

TS / JS

import { createAntdTheme } from "@themvora/antd";
import { getBuiltInThemes, resolveTheme } from "@themvora/core";

const themes = getBuiltInThemes();
const config = createAntdTheme(resolveTheme(themes, "plum-dark"));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static config

import { createAntdTheme } from "@themvora/antd";
import { getBuiltInThemes } from "@themvora/core";

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

const config = createAntdTheme(theme);

API Reference

Provider

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

Create

Export	Description
`createAntdTheme(source)`	Builds an Ant Design `ThemeConfig` from a theme definition, its tokens, or a runtime.
`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.

Next steps

Compatibility Check

Verify framework and library version compatibility

→

Browse Components

See all Ant Design components with theming

→

Migration Guide

Upgrade from previous adapter versions

→

Pick your framework

Installation

How it works

Quick Start

Mount the provider

Use Ant Design components

Theme switching

Before and after

A complete example

What gets mapped

What's Available

Provider

Create

Registry

Use Cases

Build a static AntD config

More Examples

API Reference

Provider

Create

Registry

Next steps

Related documentation

Pick your framework

Installation

How it works

Quick Start

Mount the provider

Use Ant Design components

Theme switching

Before and after

A complete example

What gets mapped

What's Available

Provider

Create

Registry

Use Cases

Build a static AntD config

More Examples

API Reference

Provider

Create

Registry

Next steps

Related documentation