Getting started with Storybook

[Image Source: https://storybook.js.org/]

Storybook is a UI development environment and playground for UI components. This tool enables users to create components independently and showcase components interactively in an isolated development environment.

Storybook runs outside of your main app so developers can develop UI components in isolation without worrying about app specific dependencies and requirements.

Storybook supports many different frontend view layers with more coming!

frontend view layer frameworks

React, Angular, Vue, Mithril, Marko, HTML, Svelte, Meteor, and Ember are currently supported.

Cool Now Let’s move to get started with Storybook. Following instructions are for install Storybook on your project automatically but one thing this automatic tool adds a set of boilerplate files for Storybook in your project.

cd project-directory 
npx -p @storybook/cli sb init

Let’s start Storybook with following command then Storybook should be available in the browser with a link provided in the console.

npm run storybook

Now you can enjoy Storybook from developing your customized web application components.

If you are looking for other tutorials in Storybook + React, here is the correct path:

1. Getting started with Storybook (YOU ARE HERE)
2. Manual Configuration Storybook with React
3. Add Addons to React Storybook