Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
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
Last updated 4 months ago
Downloads per week
Readme View on GitHub


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.ts or .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: id is an new required key, must be unique string.

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

import { withMantineThemes } 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 = [
    themes: [
        id: "Dark",
        colorScheme: "dark" 
        id: "light-green",
        name: "Light Green Theme",
    mantineProviderProps: {
      withCSSVariables: true,
      withGlobalStyles: true,
      withNormalizeCSS: true,

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


withMantineThemes({themes, mantineProviderProps})

Call this function inside the decorators array in .storybook/preview.js.


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

Additionally, each theme object must have:

  • id: string - required, this must be unique between themes
  • name?: string - optional, name to show in list to pick themes from.


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,



  • Support for Storybook 7 - will not work with older versions of Storybook.
  • Rebuilt entire package using AddonKit and Typescript.
  • Keeps selected theme consistently when switching between component examples, rather than defaulting back to first theme every time.



  • Update peer dependencies



Initial release

Join the community
6,316 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI