✳flâneur — a map of the web's best reading

What's a Story

storybook.js.org · 797 words · saved by 1 readers

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support. The CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page. Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with .stories.js or .stories.ts. The stories are written in Component Story Format (CSF)--an ES6 modules-based standard--for writing component examples. Let’s start with the Button component. A story is a function that describes how to render the component in question. Here’s how to render Button in the “primary” state and export a story called Primary. View the rendered Button by clicking on it in the Storybook sidebar. The above story definition can be further improved to take advantage of Storybook’s “args” concept. Args descr

What's a story? | Storybook docs Docs » Get Started » What's a story? Version 10.5 Get Started Why Storybook? Install Frameworks What's a story? Browse stories Setup Conclusion Stories Args Parameters Decorators Play function Loaders Tags Naming components and hierarchy Mocking data and modules Building pages and screens Stories for multiple components Writing stories in TypeScript Testing Interaction tests Accessibility tests Visual tests Snapshot tests Test coverage In CI Integrations Docs Autodocs MDX Doc blocks Code panel Preview and build docs AI Agentic setup MCP server Best practices Ma

Explore this link on the map →

related reading