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
Storybook theme switcher
Switch easily between multiple themes declared in your css files
npm install storybook-theme-switch-addon
Last updated 6 months ago
Downloads per week
Readme View on GitHub

Storybook theme/stylesheet switcher addon


This addon allows you to switch easily between multiple themes declared in your CSS files. It's especially useful in Tailwind CSS if you have more themes in separate files.

In addition, on every theme change, your URL updates with a query param that points currently selected theme.


The idea and code parts were inspired by storybook-stylesheet-toggle addon.

Getting started

Install the package:

npm i storybook-theme-switch-addon

Add the next addon to your .storybook/main.(js,ts) file:

module.exports = {
  addons: ["storybook-theme-switch-addon"],

Configure your themes in .storybook/preview.(js,ts) by adding globalTypes to preview object:

globalTypes: {
  stylesheets: {
    themes: [
        id: "primary-theme",
        title: "Primary theme",
        url: "./primary-theme.css",
        id: "secondary-theme",
        title: "Secondary theme",
        url: "./secondary-theme.css",
        id: "tertiary-theme",
        title: "Tertiary theme",
        url: "./tertiary-theme.css",

Remember to configure your storybook to serve static files in public directory:

const config: StorybookConfig = {
  staticDirs: ["../public"],

Development scripts

  • yarn start runs babel in watch mode and starts Storybook
  • yarn build build and package your addon code
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI