Addons and Enhancing Stories

Popular addons

Storybook has a rich addon ecosystem, including Docs, Controls, Interactions and A11y (Accessibility). Most are bundled in @storybook/addon-essentials (Storybook 8).

Using the Actions addon

fn() from @storybook/test records callback calls, shows them in the Actions panel and lets you assert on them.

import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from './Button';

const meta = { component: Button, title: 'Components/Button' } satisfies Meta<typeof Button>;
export default meta;

// fn() logs calls in the Actions panel and can be asserted in play functions
export const Clickable: StoryObj<typeof meta> = {
  args: { children: 'Click me', onClick: fn() },
};

Docs addon for auto-generated docs

The Docs addon automatically generates component documentation from your stories and JSDoc comments, creating a living style guide.