Discover Storybook, a powerful UI development tool for creating & showcasing components in isolation. Learn about Component Story Format, Redux components, and more in our in-depth guide. #storybook
Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment. Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app-specific dependencies and requirements.
<video autoplay="" muted="" loop="" playsinline="" alt="Storybook video" style="width:100%"> <source src="https://storybook.js.org/videos/storybook-hero-video-optimized.mp4" type="video/mp4"> </video>Since Storybook 5.2, Storybook’s Component Story Format (CSF) is the recommended way to write stories. In CSF, stories and component metadata are defined as ES6 modules. Every Component story file consists of a required default export and one or more named exports.
Default export
The default export defines metadata about your component, including the component itself, its title (where it will show up in the navigation UI story hierarchy), , and . title should be unique, i.e. not re-used across files.