There are many way to support multiple themes or multiple brands in Storybook. However, our recommendation is to control theming via Storybook globals.
Refer to How to add a theme switcher to Storybook for more details.
Loading different themes
You can, for example, create a Storybook global called
theme with possible values equal to
From there, you can import your differents brands in 3 ways:
- Generate a variant property for all your components.
- Generate multiple components, one with each brand selected.
- Generate multiple Figma files with all components of a brand in a file.
The method for generating your components will depend on your workflow and organization. Here are the details for each method:
Generate a variant property
This is done while importing each component.
theme global as described in Storybook’s globals page.
The resulted components will have an extra variant property with the list of themes and all variants for each theme will be generated.
Generate multiple components
This is done by importing each component multiple times.
For each component, select only the specific
theme value that you want to import.
Each component will be created using a different theme and you can then organize them in folders appropriately.
We are working on a feature to create multiple components automatically.
Generate multiple Figma files
This is done by importing all components multiple time into different files.
You can enforce the file’s theme by setting the theme in the Import defaults for this file.
We are working on features to simplify the management of multiple files.