Mantine Themes in Storybook 🤯

Are you currently using Storybook and Mantine component library to develop your React application?

If so, my newly published storybook addon might make your life easier!

Key Features

• Easily have Storybook display your custom theme for all Stories.
• Switch between multiple custom themes (e.g. dark and light mode) directly from the Mantine Theme addon panel.

See it in action

This link will take you to the test Storybook, click on the Mantine Theme addon to switch between two predefined themes & see the Mantine button reflect it.

josiahayres.github.io

How to install

You can get the Storybook addon here.

1. npm i -D storybook-addon-mantine
2. Register the addon .storybook/main.js
3. Provide your theme(s) to the addon .storybook/preview.js

See full details on my GitHub page

What's next?

I'd like to be able to showcase the values of the currently selected theme, and eventually customise the theme directly from storybook.

Would you use this functionality if it existed? Is it sufficient being able to configure the themes in the storybook preview file?