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