chan.dev/ lessons/ storybook

Explore Component Interfaces with Storybook Controls

In Storybook, we can interactively explore and stress-test components with Storybook Controls.

Storybook provides a UI control for every component arg. We can use these to explore different outcomes.

[screen: visually track this section]

Storybook automatically generates Controls for stories that use the CSF3 object syntax. In this format, args are defined on a story are applied to the component defined in component meta.

Unlike rendering a component and passing props directly to it, args involve Storybook — giving us Controls for free.

With controls, more teammates can become part of the component development and QA process — building more robust components together.