New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-mantine
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 23 days ago
924
Downloads per week
Readme View on GitHub

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

1.2

  • Update peer dependencies

1.1

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.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI