Mantine

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.

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

What's Available

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

Use Cases

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

import { createMantineTheme } from "@theme-kit/mantine";

const theme = createMantineTheme({ family: "cocoa", mode: "dark" });

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

import { createMantineTheme } from "@theme-kit/mantine";

const theme = createMantineTheme({ family: "cocoa", mode: "dark" });

API Reference