Storybook is an open source tool for developing UI components and great when we are building themes. It helps us build and test our component in isolation, by changing its props and responsiveness. It can serve other purposes as well, such as maintaining a component library, series of same designed components, sharing it within the team to get feedback, and so on.

Perquisites:

• HTML, CSS and JavaScript Skills
• React Framework
• VS Code Editor

Install Storybook:

(alternative command:    npx -p @storybook/cli sb init)

It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab, and you’ll be greeted by a welcome screen.

By default, The CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.

Creating Stories:

In the src folder, get rid of autogenerated code and create a components folder and a file Hello.js inside it, with the content below:

create a stories folder and a file Hello.stories.js inside it, with the content below:

Run storybook

“npm run storybook”

In this article, we will be adding the Action addon to the stories created. The Actions Addon can be used to display data received by event handlers in storybook

Let’s create another story Button component:

Add a file Button.js inside component folder, with the content below:

Add a file Button.stories.js inside stories folder, with the content below:

Run storybook

“npm run storybook”

Add CSS properties to button and added one more button to buttonsample

Run storybook

“npm run storybook”

So let’s build another component:

Header Component

Inside src/component, add a new file called Header.js:

Inside src/stories, add a new file called Header.stories.js:

Run storybook

“npm run storybook”

Lets create a Card component :

Inside src/component, add a new file called Card.js:

Inside src/stories, add a new file called Card.stories.js:

Checking a component’s stories as you develop helps prevent accidental regressions.