Skip to main content

Storybook

Storybook is our default choice for building UI components in an isolated environment.

Storybook is a sandbox for building UI components, it enables you to create and showcase components in isolation without the need for dependencies.

Components are added as "stories" which captures the rendered state of the component, having multiple stories per component helps cover all the possible interesting states and acts as your documentation.

Storybook supports a wide range of frameworks including the most popular ones being React, Vue, Angular, and Web Components.

Below is an example of the BBC's design system Psammead which is powered by Storybook. You can view more examples of Storybooks here.

BBC Psammead{style="max-width: 100%"}{style="border: none;"}

What are the benefits?

Create components in isolation

With Storybook you can add components in isolation without needing to setup dependencies like business logic or data. It is great for producing proof of concepts as you no longer require to wire your components into your app, and will ultimately help with your Build-Measure-Learn feedback loop.

Mock hard to reach use cases

Instead of having to go through a tedious user journey to get your application into a very specific state, you can use Storybook to mock out the data your components receive to reach your exact scenario.

It encourages reusability

Storybook encourages you to reuse existing components that have already been documented in Storybook and to create new components that are also documented with stories.

Living style guide

Storybook is a living style guide that can be used at the centre of both the design and the development process which can be used as the single source of truth.

Helps facilitate conversation

You can use Storybook to help facilitate and drive conversations with other development teams, design, and other product stakeholders.

Testing in mind

You can document all possible scenarios for your components as stories and then make use of Storybook addons to do things like; automate code regressions using Storyshots, automate UI visual regressions with Chromatic, and even run accessibility testing.

What are things to watch out for?

Learning curve

There will be a learning curve, it will take time to adopt and integrate Storybook into your workflows. Over time you should see a return on this investment as you start benefiting from reusable components and all of the other added benefits of Storybook.

It may slow you down

On smaller projects the overhead of using Storybook might not be worth the benefits, especially if components are not going to be reused on the UI, and if your team is already very cohesive. It may also slow down projects that are in their infancy, especially ones that are undergoing constant feature and design changes.

Further Reading

Design Systems for Developers

A design system consolidates common UI components in a central repository, Storybook can be used at all stages of the worfkflow to help build these complex component libraries. See Design Systems for Developers for further reading.