Storybook Addon Version

Storybook Addon Version displays the version of a component or package directly in the Storybook toolbar, making it easy to identify which version is currently being viewed.

Installation

npm install storybook-version --save-dev

Setup

1. Register the addon

Add the addon to the addons array in your Storybook main configuration file:

const config: StorybookConfig = {
    addons: ["storybook-version"],
};

export default config;

2. Configure version parameters

Set the version parameter in your story to provide the version information to display.

Parameters

| Property | Required | Type | Description | Example | |---|---|---|---|---| | major | ✔ | string | Major version number | '1' | | minor | ✔ | string | Minor version number | '2' | | patch | ✔ | string | Patch version number | '3' | | postfix | | string | Additional version label (e.g. pre-release identifier) | 'beta.1' | | style | | Record<string, string> | CSS properties to override the default toolbar badge style | { color: 'red', 'border-width': '2px' } |

Global configuration

To apply a version across all stories, set the parameter globally in your preview:

export const parameters = {
  version: {
    major: '1',
    minor: '2',
    patch: '3'
  }
}

Story-level Example

Override or set the version for a specific story by adding the version parameter to its default export:

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    version: {
      major: '4',
      minor: '2',
      patch: '0',
      postfix: 'rc3',
      style: {
        color: 'red',
        'font-weight': '900',
        'font-size': '24px'
      }
    }
  }
}

Story-level parameters take precedence over global parameters, allowing you to show different versions per component.

Storybook compatibility

| Storybook version | Addon latest supported version | |---|---| | 6 | 0.1.1 | | 8 | 0.1.2 | | 9 | 0.1.4 | | 10 | latest |