Integrate Bootstrap and Storybook
Bootstrap is a powerful, extensible, and feature-packed frontend toolkit. This recipe shows you how to get the most out of Bootstrap in Storybook.
This recipe assumes that you are using Storybook >=7.0 using the getting started guide. Don’t have this? Then run:
1. Import Bootstrap
Import the Bootstrap files in your .storybook/preview.js file.
Check out our Sass recipe for instructions on how to configure Storybook to work with Sass.
2. Add a theme switcher
Bootstrap now ships with a dark mode that you can activate by adding a [data-bs-theme] data attribute to a parent element.
You can use @storybook/addon-themes to add a theme switcher to your stories.
Run the following script to install and register the addon:
Did the configuration script fail?
Under the hood, this runs npx @storybook/auto-config themes which should read your project and try to configure your Storybook with the correct decorator. If running that command directly does not solve your problem, please file a bug on the @storybook/auto-config repository for that we can make this good as can be. To manually add this addon, install it then add it to the addons array in your .storybook/main.ts.
Then, to enable switching between these modes in a click for your stories, use our withThemeByDataAttribute decorator by adding the following code to your .storybook/preview.js file.
Get involved
Now you're ready to use Bootstrap with Storybook. 🎉 Check out the example repo for a quick start.
If you use Bootstrap at work, we'd love your feedback on the Bootstrap + Storybook experience. Join the maintainers in Discord to get involved, or jump into addon docs.