New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,099
Back to integrations
Add your integration
Categories
  • ⭐️ 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
58
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

Installation

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 = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials',
    '@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;

Usage

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
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI