# storybook-version

> Add package or component version to the Storybook toolbar

Latest version **0.1.9** (published 2026-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install storybook-version
pnpm add storybook-version
yarn add storybook-version
bun add storybook-version
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2026-03-20 |
| First published | 2022-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Alessandro |
| Maintainers | silversonicaxel |
| Keywords | storybook-addons, storybook-version, toolbar, version, versioning |

## Links

- npm: https://www.npmjs.com/package/storybook-version
- Repository: https://github.com/silversonicaxel/storybook-addon-versioning
- Homepage: https://github.com/silversonicaxel/storybook-addon-versioning#readme
- Issues: https://github.com/silversonicaxel/storybook-addon-versioning/issues
- npm.io page: https://npm.io/package/storybook-version

## Recent versions

- 0.1.9 (latest) — 2026-03-20
- 0.1.8--canary.202965b.1 (canary) — 2026-03-20
- 0.1.8 — 2026-03-20
- 0.1.8--canary.202965b.0 — 2026-03-20
- 0.1.7 — 2026-03-20
- 0.1.6 — 2026-03-17
- 0.1.5 — 2026-03-17
- 0.1.4 — 2025-07-26
- 0.1.4--canary.5e8bfe5.0 — 2025-07-26
- 0.1.3 — 2025-07-26
- 0.1.3--canary.11.8e3484f.0 — 2025-07-26
- 0.1.3--canary.10.e506db3.0 — 2025-07-26
- 0.1.2 — 2024-07-17
- 0.1.2--canary.7.edbd40b.0 — 2024-07-17
- 0.1.1 — 2022-12-15
- … 11 more at https://npm.io/package/storybook-version/versions

## README

# Storybook Addon Version

[![npm version](https://badge.fury.io/js/storybook-version.svg)](https://www.npmjs.com/package/storybook-version)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[Storybook Addon Version](https://storybook.js.org/addons/storybook-version/) displays the version of a component or package directly in the [Storybook](https://storybook.js.org) toolbar, making it easy to identify which version is currently being viewed.

## Installation

```sh
npm install storybook-version --save-dev
```

## Setup

### 1. Register the addon

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

```js
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`:

```js
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:

```js
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 |

---
_Source: https://npm.io/package/storybook-version · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._