Frontend Academy · Lesson

Storybook: Stories Controls and Docs

Write stories for each component state, use Controls to tweak props interactively, and generate Docs pages from JSDoc and argTypes.

Storybook: Stories Controls and Docs is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Storybook?

Storybook is a workshop for UI components, isolated from your app. You write 'stories' — example uses of each component in various states — and browse them in a dev server. Indispensable for design systems.

Why Use Storybook?

1) Develop components in isolation without setting up an app context. 2) Visually review all states (loading, error, empty). 3) Designers and PMs can browse the catalogue. 4) Generates documentation. 5) Automates visual regression testing.

Installing Storybook

Use the official initialiser — it detects your framework and configures everything.

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

Writing a Story (CSF 3.0)

Component Story Format 3: default export = metadata, named exports = stories.

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

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

Multiple Stories per Component

One story per important state: default, hover, loading, error, empty, populated. Reviewers can click through and see every variation at a glance.

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Controls (Args Table)

Storybook's Controls addon turns the args object into interactive form controls. Tweak prop values live in the UI to test edge cases.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Actions Addon

Use action() to log event handler calls in the Actions panel. Great for testing callbacks without wiring up real state.

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs — Auto-Generated Documentation

Add tags: ['autodocs'] to metadata; Storybook generates a Docs page with the component's props table, descriptions, and renderable examples.

MDX for Rich Docs

Write component docs in MDX — Markdown plus embedded JSX. Mix prose with live component examples.

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

Decorators — Wrap Stories with Context

Wrap stories in providers (Theme, Router, Redux) using decorators.

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

Visual Regression Testing

Chromatic (by Storybook team) takes a screenshot of every story on every commit and diffs against the baseline. Catches visual regressions automatically.

Deploying Storybook

npm run build-storybook produces a static site in storybook-static/. Deploy to Netlify, Vercel, GitHub Pages — gives non-developers a browsable component catalogue.

Quick Check

What does adding tags: ['autodocs'] to a component's Storybook metadata do?

Recap: Storybook

Isolated workshop for UI components. CSF 3.0: default export = meta, named exports = stories. argTypes for Controls. action() for callback logging. tags: ['autodocs'] for auto-generated docs. MDX for rich prose + JSX. Decorators inject providers. Chromatic for visual regression. Build-storybook for static hosting.

Frequently asked questions

Is the “Storybook: Stories Controls and Docs” lesson free?

Yes — the full text of “Storybook: Stories Controls and Docs” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Storybook: Stories Controls and Docs”?

Write stories for each component state, use Controls to tweak props interactively, and generate Docs pages from JSDoc and argTypes. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Storybook: Stories Controls and Docs” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy