dev-resources.site
for different kinds of informations.
Mantine Themes in Storybook 🤯
Published at
7/10/2022
Categories
react
storybook
mantine
themes
Author
josiahayres
Author
11 person written this
josiahayres
open
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.
How to install
You can get the Storybook addon here.
npm i -D storybook-addon-mantine
- Register the addon
.storybook/main.js
- 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?
mantine Article's
10 articles in total
𝐌𝐚𝐧𝐭𝐢𝐧𝐞 𝐁𝐨𝐚𝐫𝐝𝐬 🚀
read article
How I Built an Open-Source Admin Dashboard Template with Mantine and Next.js
read article
How to Create Component Library Like Material UI or Mantine UI?
read article
Mantine simple responsive component attribute
read article
Setting up Mantine with Tailwind CSS using Emotion cache
read article
Boost Your Next.js Project with this Pre-Built Application Template
read article
Introducing Mantine DataTable
read article
Mantine Modal Header
read article
Mantine Themes in Storybook 🤯
currently reading
Pingvin Share - A selfhosted file sharing platform
read article
Featured ones: