Usage with Storybook

Get started with Storybook

Create sharable theme object

Create a separate file that will store your theme object – you will need to use it both for your application and Storybook:

// theme.ts file
import type { MantineThemeOverride } from '@mantine/core';
// export your theme object
export const theme: MantineThemeOverride = {
primaryColor: 'orange',
defaultRadius: 0,
};

MantineProvider with Storybook

To add MantineProvider (and other providers) to your Storybook setup create preview.tsx file in your Storybook configuration folder (usually it is called .storybook):

// .storybook/preview.tsx
import { MantineProvider } from '@mantine/core';
// import theme object you've exported in previous step
import { theme } from './theme';
// Create a wrapper component that will contain all your providers.
// Usually you should render all providers in this component:
// MantineProvider, DatesProvider, Notifications, Spotlight, etc.
function ThemeWrapper(props: { children: React.ReactNode }) {
return (
<MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
{props.children}
</MantineProvider>
);
}
// enhance your stories with decorator that uses ThemeWrapper
export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];

Color scheme toggle

To setup color scheme toggle in Storybook use storybook-dark-mode addon:

yarn add --dev storybook-dark-mode
npm install --save-dev storybook-dark-mode

Then integrate it in decorator that was created in previous step:

import { useDarkMode } from 'storybook-dark-mode';
import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
import { theme } from './theme';
function ThemeWrapper(props: { children: React.ReactNode }) {
const colorScheme = useDarkMode() ? 'dark' : 'light';
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={() => {}}>
<MantineProvider theme={{ ...theme, colorScheme }} withGlobalStyles withNormalizeCSS>
{props.children}
</MantineProvider>
</ColorSchemeProvider>
);
}
export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];

Note that you will need to use ColorSchemeProvider only if you have components that use useMantineColorScheme. If you do not use this hook in your application then it is safe to omit ColorSchemeProvider from your Storybook setup:

import { useDarkMode } from 'storybook-dark-mode';
import { MantineProvider } from '@mantine/core';
import { theme } from './theme';
function ThemeWrapper(props: { children: React.ReactNode }) {
return (
<MantineProvider
theme={{ ...theme, colorScheme: useDarkMode() ? 'dark' : 'light' }}
withGlobalStyles
withNormalizeCSS
>
{props.children}
</MantineProvider>
);
}
export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];