Integrate Bootstrap with Storybook
This recipe assumes that you are using Storybook >=7.0 using the getting started guide. Don’t have this? Then run:
# Add Storybook:
npx storybook@latest init1. Import Bootstrap
Import the Bootstrap files in your .storybook/preview.js file.
// .storybook/preview.js
import 'bootstrap/dist/css/bootstrap.min.css';
// Only import this if you want to use Bootstrap's
// JQuery helpers
import 'bootstrap/dist/js/bootstrap.bundle';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
expanded: true,
hideNoControlsWarning: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};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:
npx storybook@latest add @storybook/addon-themesDid 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.
// .storybook/preview.js
import { withThemeByDataAttribute } from '@storybook/addon-themes';
// snipped for brevity
export const decorators = [
withThemeByDataAttribute({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
attributeName: 'data-bs-theme',
}),
];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.
- ShaunEvening
