Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
CSS Framework Switcher
Easy switcher it switches CSS Framework used in preview
npm install @hiroyoshi-mori/storybook-css-framework-switcher
Last updated 6 days ago
Downloads per week
Readme View on GitHub

Storybook Addon CSS Framework Switcher

Easy switcher it switches CSS Framework used in preview and add environment variable CSS_FRAMEWORK which can be used to identify which css framework is used now Github


First, install the package.

npm install --save-dev @hiroyoshi-mori/storybook-css-framework-switcher

Then, register it as an addon in .storybook/main.js.

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // of config
  addons: [
    '@hiroyoshi-mori/storybook-css-framework-switcher', // 👈 register the addon here
  staticDirs: [
    { from: '../node_modules/cirrus-ui/dist/', to: '/assets/cirrus-ui'}, // 👈 Copy files from css framework dist directories to /assets
    { from: '../node_modules/bulma/css/', to: '/assets/bulma'},

export default config;


The primary way to use this addon is to define the exampleParameter parameter. You can do this the component level, as below, to affect all stories in the file, or you can do it for a single story.

const preview: Preview = {
  parameters: {
    cssFrameworkSwitcher: {
      frameworks: [
        { id: 'Cirrus', srcPath: '/assets/cirrus-ui/cirrus-all.css' },  // 👈 Set ID and css path to load
        { id: 'Bulma', srcPath: '/assets/bulma/bulma.css' },

Copyright and license Github

Copyright 2024 Hiroyoshi Mori / Script Laboratory.

Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI