Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

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.

Prerequisites

This recipe assumes that you are using Storybook >=7.0 using the getting started guide. Don’t have this? Then run:

Terminal
Loading...

1. Import Bootstrap

Import the Bootstrap files in your .storybook/preview.js file.

.storybook/preview.js
Loading...
Using Sass?

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:

Terminal
Loading...
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.

Loading...

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.

Join the community
6,609 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI