Material UI

@theme-kit/mui

MUI Material UIReactProvidercreateTheme

Derive a Material UI theme from Theme Kit semantic tokens and rebuild it automatically whenever the active theme changes.

Installation

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

bash

pnpm add @theme-kit/mui

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

What's Available

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

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

Build a static MUI theme

import { createMuiTheme } from "@theme-kit/mui";
import { resolveTheme } from "@theme-kit/core";

const theme = createMuiTheme(resolveTheme({ family: "plum", mode: "dark" }));

More Examples

Static themes generated from concrete tokens, and runtime subscriptions.

Static theme

1import { createMuiTheme } from "@theme-kit/mui";
2import { resolveInitialTheme, getBuiltInThemes } from "@theme-kit/core";
3
4const themes = getBuiltInThemes();
5const { theme } = resolveInitialTheme({ themes, family: "plum" });
6
7const muiTheme = createMuiTheme(theme);

API Reference

Provider

Export	Description
`MuiThemeProvider`	Wraps MUI's own `ThemeProvider` with a theme derived from Theme Kit semantic tokens (palette, shape, typography, shadows, breakpoints).
`useMuiTheme(runtime)`	Subscribes to a Theme Kit runtime and returns a `Theme` rebuilt whenever the theme changes.

Create

Export	Description
`createMuiTheme(source)`	Builds a `Theme` from a theme definition or tokens with `createTheme`.
`buildMuiThemeOptions(theme)`	Maps an `AdapterResolvedTheme` to MUI `ThemeOptions` — colors, spacing, shape, shadows, breakpoints.

Registry

Export	Description
`createMuiAdapter(options)`	Framework-neutral `ThemeAdapter` you register via `runtime.adapters.use()` — alternative to the provider, with `getSnapshot`/`subscribe` for use outside React.
`MUI_ADAPTER_ID`	The registry id (`"mui"`) used to identify and replace the adapter.
`CreateMuiAdapterOptions`	Options for the registry adapter — including `strategy` for how faithfully tokens map onto MUI's theme.
`MuiAdapterOptions`	Base adapter options type (strategy + defaults) used by both the provider and the registry adapter.