Storybook Addon Mantine

Overview

Storybook-addon-mantine is an addon for Storybook that wraps Mantine components with a MantineProvider. It allows users to switch between themes and see how their components and pages will look.

Features

• Theme Switching: Users can easily switch between themes and see the impact on their components and pages.
• MantineProvider Wrapping: Mantine components are wrapped with the MantineProvider, providing a consistent theme throughout.
• Customization: Users can pass themes and MantineProvider props to customize the addon as needed.

Installation

To use the Storybook-addon-mantine:

1. Install the addon in your project.
2. Register the addon in your project’s .storybook/main.js file.
3. Pass the theme(s) to the addon in your .storybook/preview.js file.

Here are the specific steps:

1. Install the addon: [command to install addon]
2. Register the addon: Add the following code to your .storybook/main.js file:

   // Register the addon
   addons: [
     '@storybook/addon-mantine',
   ],
   

3. Pass the theme(s) to the addon: Add the following code to your .storybook/preview.js file:

   // Pass the theme(s) to the addon
   export const decorators = [
     withThemesProvider(themesList, mantineProviderProps),
   ];
   

Please note that themeName is an optional key you can provide to override the name shown in the Storybook panel. It’s also recommended to set withGlobalStyles to true if you use dark mode.

For more information about how to use the addon, please refer to the documentation at [addon documentation link].

Summary

Storybook-addon-mantine is a useful addon for Storybook that allows users to easily switch between themes and see how their Mantine components and pages will look. It provides a straightforward installation process and offers customization options such as passing themes and MantineProvider props. The addon is built upon the foundation laid by storybook-addon-material-ui.