Themvora + Mantine

@themvora/mantine

Generated themeReactProviderColorScheme

Map Theme semantic tokens onto a Mantine theme, with color-scheme forced to match the active Themvora mode.

Verified with Themvora 2.0.0·Updated 2026-09-17

Pick your framework

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

Installation

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

bash

pnpm add @mantine/core @mantine/hooks

2. Install Themvora

bash

pnpm add @themvora/core @themvora/react @themvora/mantine

How it works

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

Mantine 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 { MantineThemeProvider } from "@themvora/mantine";

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

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 Mantine components

TSX / JSX

import { Button, Card, Title } from "@mantine/core";

export function Example() {
  return (
    <Card withBorder padding="lg">
      <Title order={5}>Themvora + Mantine</Title>
      <Button>Primary action</Button>
    </Card>
  );
}

These are ordinary Mantine components. No Themvora-specific props are required — the theme reaches them through Mantine'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 "@mantine/core";

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 Mantine.

With Themvora

Themvora owns the theme. The adapter derives the Mantinetheme 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 Mantine 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 { MantineThemeProvider } from "@themvora/mantine";

import { Example } from "./Example";

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

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

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	Mantine
primary	primaryColor: "primary"
primary	primaryShade.light / .dark
primaryForeground	primary.contrast (via variantColorResolver)
radius	defaultRadius

Prerequisites

Core Package

@themvora/core (peer dependency)

Library Version

Compatible with Mantine v3+

Adapter Type

Generated Theme

What's Available

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

Provider

Create

Use Cases

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

Build a static Mantine theme

Generate a Mantine theme (with shades, fonts, radius) from tokens.

Build a static Mantine theme

TS / JS

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

const themes = getBuiltInThemes();
const theme = createMantineTheme(resolveTheme(themes, "cocoa-dark"));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static theme

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

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

const theme = createMantineTheme(builtIn);

API Reference

Provider

Export	Description
`MantineThemeProvider`	Wraps Mantine's `MantineProvider`, forcing the color scheme to match the active Themvora mode.
`useMantineTheme(runtime)`	Subscribes to a runtime and returns a Mantine `Theme` rebuilt on changes.

Create

Export	Description
`createMantineTheme(source)`	Builds a Mantine theme from a theme definition, its tokens, or a runtime — colors (with generated shades), fonts, radius, spacing, shadows, breakpoints.

Next steps

Compatibility Check

Verify framework and library version compatibility

→

Browse Components

See all Mantine components with theming

→

Migration Guide

Upgrade from previous adapter versions

→

Themvora + Mantine

@themvora/mantine

Generated themeReactProviderColorScheme

Map Theme semantic tokens onto a Mantine theme, with color-scheme forced to match the active Themvora mode.

Verified with Themvora 2.0.0·Updated 2026-09-17

Pick your framework

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

Installation

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

bash

pnpm add @mantine/core @mantine/hooks

2. Install Themvora

bash

pnpm add @themvora/core @themvora/react @themvora/mantine

How it works

Quick Start

Mantine 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 { MantineThemeProvider } from "@themvora/mantine";

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

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 Mantine components

TSX / JSX

import { Button, Card, Title } from "@mantine/core";

export function Example() {
  return (
    <Card withBorder padding="lg">
      <Title order={5}>Themvora + Mantine</Title>
      <Button>Primary action</Button>
    </Card>
  );
}

These are ordinary Mantine components. No Themvora-specific props are required — the theme reaches them through Mantine'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 "@mantine/core";

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 Mantine 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 { MantineThemeProvider } from "@themvora/mantine";

import { Example } from "./Example";

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

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

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	Mantine
primary	primaryColor: "primary"
primary	primaryShade.light / .dark
primaryForeground	primary.contrast (via variantColorResolver)
radius	defaultRadius

Prerequisites

Core Package

@themvora/core (peer dependency)

Library Version

Compatible with Mantine v3+

Adapter Type

Generated Theme

What's Available

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

Provider

Create

Use Cases

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

Build a static Mantine theme

Generate a Mantine theme (with shades, fonts, radius) from tokens.

Build a static Mantine theme

TS / JS

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

const themes = getBuiltInThemes();
const theme = createMantineTheme(resolveTheme(themes, "cocoa-dark"));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static theme

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

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

const theme = createMantineTheme(builtIn);

API Reference

Provider

Export	Description
`MantineThemeProvider`	Wraps Mantine's `MantineProvider`, forcing the color scheme to match the active Themvora mode.
`useMantineTheme(runtime)`	Subscribes to a runtime and returns a Mantine `Theme` rebuilt on changes.

Create

Export	Description
`createMantineTheme(source)`	Builds a Mantine theme from a theme definition, its tokens, or a runtime — colors (with generated shades), fonts, radius, spacing, shadows, breakpoints.