Storybook Patterns

Quick Guide: A story is a component in one state, written as a plain object in CSF 3.0: a default meta export describing the component, then one named export per state. Props come from args so the controls panel can edit them, argTypes shapes those controls, tags: ["autodocs"] turns the file into a documentation page, and a play function drives interactions with @storybook/test so the same story doubles as a test.

Detailed Resources:

• examples/core.md — CSF 3.0 files, args inheritance, argTypes, decorators, render functions, story organisation
• examples/testing.md — play functions, composed flows, keyboard navigation, visual and accessibility parameters
• examples/docs.md — autodocs, custom docs pages, MDX, source display, descriptions
• examples/addons.md — addon setup, viewports, backgrounds, the test addon, configuration decisions
• reference.md — control types, parameters, addon list, @storybook/test API, file naming, migration notes

Which path applies

A story file usually serves both, but the two make different demands on how it is written.