storybook-addon-mantine

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: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-mantine",
  ],
  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 = [
  mantineTheme(
    [
      { ...lightTheme, themeName: "Light Mode" },
      {
        themeName: "Dark Mode - Green",
        primaryColor: "green",
        colorScheme: "dark",
        radius: 0,
      },
    ],
    mantineProviderProps
  ),
];

Info: It's highly recommended to set withGlobalStyles to true if you use dark mode.
To learn more about what it does, check out https://mantine.dev/theming/mantine-provider/#css-reset-and-global-styles

Options

mantineTheme(themesList, mantineProviderProps)

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

themesList

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

mantineProviderProps

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,
};

Versions

1.3

• Support Mantine v6 (https://mantine.dev/changelog/6-0-0/).
• Only Require @mantine/core as peer dependency

1.2

• Update peer dependencies

1.1

• Support Mantine v5 (https://mantine.dev/changelog/5-0-0/).
• Adds second parameter mantineProviderProps to mantineTheme(themesList, mantineProviderProps)

1.0

Initial release

Thanks

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