Storybook addon for theme packs

View on Github

🎨 storybook-themepack

Better themepacks for Storybook

npm version

Storybook addon for custom themes.

Ideal for themes based on CSS custom properties (CSS variables).


Online demo link here.

Demo source code.


Feel free to test this addon in your local environment: npm run demo.



npm install --save-dev storybook-themepack

// Install peer deps
npm install --save-dev @storybook/components @storybook/api @storybook/addons

Then register addon:

// main.js
module.exports = {
    "addons": [

And add some configuration:

const gaps = {
    // Some pretty plain CSS in this values
    gapSmall: '--gap: 12px;',
    gapMedium: '--gap: 16px;'

export default {
    title: 'Components/MyComponent',
    parameters: {
        themepack: {
            pack: {
                gap: [ 'Gap', pack(gaps) ]

Voilà! Now you can use all the power of themes based on CSS custom properties.


You can find an example repo here: examples/storybook-themepack-example

Configuration and options

Example configuration

// config.js
import {pack} from 'storybook-themepack';

    themepack: {
        // This items will be preloaded
        preloadedState: {
            brand: 'My'

        // All the styles
        pack: {
            brand: ['Brand', pack({'My': defaultMyTheme, 'Project': defaultProjectTheme})],
            color: [
                    {colorMyDefault, colorMyBrand, colorMyInverse, colorMySuccess},
                    ({brand}) => brand ? brand === 'My' : false
                    {colorProjectBrand, colorProjectDefault, colorProjectInverse, colorProjectSuccess},
                    ({brand}) => brand ? brand === 'Project' : false
            gap: ['Gap', pack({gapSmall, gapMedium})]

        // Themepack icon
        icon: 'mirror',

        // Use preview sign for themepack contents
        usePreview: true,

        // Caption for clear item
        labelForClear: '-',

        // If there is `sortFunction` themepack uses it to sort main panel menu items
        sortFunction: (a, b) => {
            if (a === 'brand') {
                return 1;
            return a === b ? 0 : a > b ? 1 : -1;

        // Custom styles for preview items and for the storybook preview iframe
        styles: {
            preview: `
                border-color: var(--color-bg-border);
                color: var(--color-typo-brand);
                background-color: var(--color-bg-default);
            iframe: `
                background-color: var(--color-bg-default);


Main themepack configuration. Every field of this object is an array.

Every option (for example, brand) contain sources for tooltips that can switch theme and preview your themed component. Packs' content for any option is merged in tooltip options.


[ <theme name>, <pack(...)>, <pack(...)>, ... ]

Packs' syntax:

    // Object contains options for tooltip
    {'theme option item name': 'css content'},
    // Optional function for conditional drawing. Uses selected values for every option
    ({yourThemeOption1, yourThemeOption2}) => true

    // Array of options for tooltip
    [{ label: 'theme option item name', css: 'css content' }]


Icon for the first item.

Variants are in @storybook/components.

Default value is mirror.


Adds preview for every option of the tooltips.

You can set up preview styles in configuration property styles.preview.

Default value is true.


Text for the element that clears tooltip.

Default value is -.


Function that sorts keys of your themepack.

Default value is not set.


Object {preview: 'string', iframe 'string'} with CSS styles.

It contains styles for a themepack item preview inside every tooltip and global style for your component preview inside Storybook.

Default value is not set.


[ ] Update Readme and examples to Storybook v6