storybook-version

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