Documenting Components with Storybook — Install, Knobs, Actions, Docs

Consolidated from a 4-part Storybook learning series written in July 2020. Storybook v8+ has since replaced Knobs with Controls and made Docs a built-in feature.

What is Storybook?

Storybook is a component-level development and documentation environment supporting React, Vue, Angular, and more. Without spinning up the entire application, you can render a single component in isolation across many states.

It's commonly used to share a shared source of truth across designers, developers, and product managers.

1. Installation and Your First Story

npx -p @storybook/cli sb init

A stories/ folder is auto-generated, seeded with example component stories. Run:

npm run storybook

The UI opens at localhost:6006.

Writing a Basic Story

import React from 'react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button label="Primary" />;
export const Secondary = () => <Button label="Secondary" />;

• title — the group/name in the Storybook sidebar tree
• Each export becomes an independent story
• You can list multiple variants in one file

2. Knobs — Runtime Prop Controls

Knobs lets you edit props live in the Storybook UI. A designer or PM can instantly try different button texts or colors without a developer's help.

Install

npm install --save-dev @storybook/addon-knobs

Register in .storybook/main.js:

module.exports = {
  addons: ['@storybook/addon-knobs'],
};

Usage

import { text, boolean, number } from '@storybook/addon-knobs';

export const Configurable = () => (
  <Button label={text('Label', 'Click me')} disabled={boolean('Disabled', false)} size={number('Size', 16)} />
);

Input fields appear at the bottom of the Storybook UI, and props update in real time.

3. Actions — Event Logging

Useful for confirming that event handlers fire as expected.

import { action } from '@storybook/addon-actions';

export const Clickable = () => <Button onClick={action('button-clicked')} label="Click" />;

When the button is clicked, the Actions panel logs button-clicked along with any arguments.

4. Docs — Automatic Documentation

Automatically generates a docs page with prop tables, types, and code samples extracted from your component.

Install

npm install --save-dev @storybook/addon-docs

With TypeScript, prop types are auto-detected. JSDoc comments on props turn into description text in the docs table.

Result

• Canvas tab: the visual render of each story
• Docs tab: prop table, code snippets, and descriptions

Great for design-team review or PM signoff.

Retrospective

The biggest win from Storybook was isolating component development context. To reproduce a specific state, I no longer needed to boot the whole app — and edge cases (empty, error, loading) could be viewed all at once.

Design QA collaboration improved too. Sending a single link saying "look at this variant" replaced paragraphs of verbal description.

In Storybook v8+, Knobs is replaced by Controls, and Docs is built in. The APIs have been streamlined, but the core value — "isolate a component and verify every variant visually" — remains the same.