This recipe assumes that you are using Storybook >=7.0 using the getting started guide. Donโt have this? Then run:
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.
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:
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.
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.