Addon for storybook which gives all stories a MantineProvider. Gives you the ability to visualise and switch between mantine themes and see how your components and pages will look with the theme applied!
npm install storybook-addon-mantine
Downloads per week


Addon for storybook which wraps Mantine components with a MantineProvider. Allows you to switch between themes and see how your components and pages will look

How to use

Install the addon

npm i -D storybook-addon-mantine

Register the addon

Do this in your project's .storybook/main.js file:

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
  framework: "@storybook/react",

Pass the theme(s) to the addon

Do this in your .storybook/preview.js file:

Info: themeName is an optional key you can provide here to override the name shown in the Storybook panel.

import { mantineTheme } from "storybook-addon-mantine";
import { lightTheme } from "../themes/light";

// These props are passed to the MantineProvider used by all stories.
const mantineProviderProps = {
  withCSSVariables: false,
  withGlobalStyles: true,
  withNormalizeCSS: false,

export const decorators = [
      { ...lightTheme, themeName: "Light Mode" },
        themeName: "Dark Mode - Green",
        primaryColor: "green",
        colorScheme: "dark",
        radius: 0,

Info: It's highly recommended to set withGlobalStyles to true if you use dark mode.
To learn more about what it does, check out


mantineTheme(themesList, mantineProviderProps)

Should be passed to exported decorators array in .storybook/preview.js.


List of themes to show inside Storybook. Each theme should be a valid Mantine Theme Override Object.


Added in storybook-addon-mantine version 1.1

This is an object of props to pass to the MantineProvider component.

Typically it'll look like

const mantineProviderProps = {
  withCSSVariables: true,
  withGlobalStyles: true,
  withNormalizeCSS: true,




Initial release


Thank you to the creators of storybook-addon-material-ui - your project demonstrated how to connect the panel with the preview wrapper.