New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,096
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
Switch between multiple mantine themes without restarting Storybook, and visualise your components / pages with each theme applied.
npm install storybook-addon-mantine
Last updated 5 months ago
2.4k
Downloads per week
Readme View on GitHub

storybook-addon-mantine

Switch between multiple mantine themes without restarting Storybook, and visualise your components / pages with each theme applied.

How to use

Install the addon

npm i -D storybook-addon-mantine

Register the addon

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

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ... other config properties
  addons: [
    // ... other addons
    "storybook-addon-mantine",
  ],
};

export default config;

Themes

// src/themes.ts
import { createTheme } from "@mantine/core";

export const greenTheme = createTheme({
  primaryColor: "green",
  // ... other theme override properties
});

export const brandTheme = createTheme({
  fontFamily: "serif",
  // ... other theme override properties
});

Pass your theme(s) to the addon

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

import "@mantine/core/styles.css";

import { withMantineThemes } from "storybook-addon-mantine";
import { greenTheme, brandTheme } from "../themes";

export const decorators = [
  withMantineThemes({
    themes: [
      {
        id: "brand-theme",
        name: "Brand Theme",
        ...brandTheme,
      },
      {
        id: "light-green",
        name: "Light Green Theme",
        ...greenTheme,
      },
    ],
  }),
];

Options

withMantineThemes({themes, mantineProviderProps})

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

themes

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.

mantineProviderProps

This is an optional object of props to pass to the MantineProvider component.
See Documentation Page for details.

Most use cases won't need to set anything for this object.

Color Schemes (Dark/Light Mode) Support.

Cannot use mantine hooks in addons for storybook v7. Need storybook manager UI to be upgraded to react 18 (so addon can use the useId hook from react). Thi seems scheduled for Storybook 8 release.

Workaround is to configure mantine useMantineColorScheme hook in your storybook instance, see Mantine documentation for all steps.

Install Storybook addons:

npm install -D storybook-dark-mode @storybook/addon-styling storybook-addon-mantine

Add addons to .storybook/main.ts:

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ... other config properties
  addons: [
    // ... other addons
    "@storybook/addon-styling",
    "storybook-dark-mode",
    "storybook-addon-mantine",
  ],
};

export default config;

Create your theme(s) as explained previously.

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import "@mantine/core/styles.css";

import React, { useEffect } from "react";
import { addons } from "@storybook/preview-api";
import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
import { MantineProvider, useMantineColorScheme } from "@mantine/core";
import { withMantineThemes } from "storybook-addon-mantine";
import { greenTheme, brandTheme } from "../themes";

const channel = addons.getChannel();

function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
  const { setColorScheme } = useMantineColorScheme();
  const handleColorScheme = (value: boolean) =>
    setColorScheme(value ? "dark" : "light");

  useEffect(() => {
    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
  }, [channel]);

  return <>{children}</>;
}

export const decorators = [
  (renderStory: any) => (
    <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>
  ),
  withMantineThemes({
    themes: [
      {
        id: "brand-theme",
        name: "Brand Theme",
        ...brandTheme,
      },
      {
        id: "light-green",
        name: "Light Green Theme",
        ...greenTheme,
      },
    ],
  }),
];

That should be it!

npm run storybook

Versions

3.0

Support Mantine v7 Release.

These are notable

2.0

  • 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.

1.3

1.2

  • Update peer dependencies

1.1

1.0

Initial release

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI