A storybook is an open-source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app.

In this article, we will cover using Storybook with React.

Let’s quickly see some advantages of using Storybook before we go to setting up:

Introduction

In this tutorial, we will:

• Create a React Project

• Add storybook/react as a dependency

• Create a UI component Library with Storybook

• Customize themes

• Deploy as a static site

Step 1 - Setup

First of all, we will create a new React app using the standard method:

1npx create-react-app storybook-app

and then, we will install the storybook package into our project:

1cd storybook-app
2npx -p @storybook/cli sb init

Now, if you go to your package.json file, you can see storybook-react dependencies installed. Great!

Let’s run these two commands and see what happens:

1npm start
2npm run storybook

No, we have reacted app and the storybook app running on two different ports (localhost:3000 and localhost:9009):

Step 2 - Adding Stories to our React App

Now we can create components using Storybook. As you can see, we have lots of staff automatically configured, and we also have a Welcome component and two demo button components. Let’s see how we can write our own stories!

First of all, recommended way of organizing files is like this:

And all of them are imported thanks to our main.js file, which is located in .stories folder. There are some alternative ways of importing stories with different file organizations, which can be found here.

Let’s make two types of headers and see… well, which one suits us better:

1#Header.stories.js
2
3import React from "react";
4
5export default {
6  title: "Headers",
7};
8
9export const Header = () => <header>This is a header</header>;
10
11Header.story = {
12  name: "Basic Header",
13};
14
15export const RedHeader = () => (
16  <header style={{ color: `red` }}>This is a red header</header>
17);
18
19RedHeader.story = {
20  name: "Red Header",
21};

Now we have our Headers folder with Header stories which we can compare very easily.

This makes our components reusable and very easy to find if we need them again in the future!

Step 3 - Integrating Addons

Addons with Storybook helps implement extra features to make them more useful and interactive. In this article, we will be adding the Actions addon to the stories created. The Actions Addon can be used to display data received by event handlers in Storybook. Also there is full list of all addons available with Storybook.

You can see in main.js file that Actions addon is already installed by default, but if you need to install it manually, you can do that easy:

1npm i -D @storybook/addon-actions

and go to .storybook/addons.js:

1import '@storybook/addon-actions/register';

Now let’s go to our Header.stories.js file and import Actions addon:

1import { action } from "@storybook/addon-actions";

And add some actions to our headers:

Now we can see what data is passed to our headers when we click on them. Although you won’t pass data by clicking on the header, this is just an example to show you the basics.  

Step 4 - Customizing Themes

With Storybook, we can customize the default theme used, and the storybook comes bundled with a default light theme. Now let’s see how we can change this to something different. We will cover switching to a dark theme.

First, let’s install theming:

1npm i -D @storybook/theming

Then, let’s create a manager.js file in our .storybook folder and do some simple configuration that applies global theming to our Storybook:

1#.storybook/manager.js
2
3import { addons } from "@storybook/addons";
4import { themes } from "@storybook/theming";
5
6addons.setConfig({
7  theme: themes.dark,
8});

With the dark theme configured, we can see the entire storybook theme looks different. At any point, this can be switched back to either a light or dark theme, depending on our preference.

For some advanced theming and customizing, you can visit this article on the official Storybook website.

Step 5 - Deploying Storybook

One feature that comes bundled with Storybook is that we can deploy our storybook as a static site that we can deploy to any hosting option of our choice. To configure this, we will need to add a build-storybook script to our package.json:

1{
2  "scripts": {
3    "build-storybook": "build-storybook -c .storybook -o .out"
4  }
5}

What this script will do is that it’ll build our storybook directory into a static web app and output it in a .out directory. We can run this script and deploy the content of the .out directory when the build is complete. Go ahead and run the command:

1npm run build-storybook

When the build is complete, we can now deploy the directory's content using any hosting of our choice. To test this works locally, we can run the following command, and it’ll serve the content of the folder as a static site:

1npx http-server .out

Conclusion

In this article, we’ve learned how to build interactive components using Storybook and React. Now we have seen what is possible with Storybook. Developing with Storybook serves as a single source of truth for both developers and designers working in a team, and it can be integrated with other front-end frameworks.

In case you’re looking out for other possibilities that Storybook provides, I recommend visiting the official documentation page and especially the examples page where you will see the full potential of Storybook.