Installation

Automatic Installation

You can install the addon and add it to your active addons automatically using storybook's storybook add option. This will install the addon in a single step:

npm

  npx storybook add storybook-addon-badges

Yarn

  yarn dlx storybook add storybook-addon-badges

pnpm

  pnpm dlx storybook add storybook-addon-badges

Manual Installation

If you'd prefer to install the addon manually, it's a quick, two-step, process:

Install the addon

npm

  npm i -D storybook-addon-badges

Yarn

  yarn add --dev storybook-addon-badges

pnpm

  pnpm add -D storybook-addon-badges

Add to your storybook config

.storybook/main.ts

// Replace [your-framework] with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/[your-framework]';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-badges', // 👈 Register the addon here
  ],
};

export default config;

info

Add Badges By default, no badges will show, so be sure to add some badges!