Storybook Tutorial

Learn Storybook to create bulletproof UI components, along the way you’ll build an app UI from scratch.

Why a Storybook tutorial?

Learn Storybook aims to teach tried-and-true patterns for component development using Storybook. You’ll walk through essential UI component techniques while building a UI from scratch in React, Vue, or Angular.

The info here is sourced from professional teams, core maintainers, and the awesome Storybook community. Rather than trying to cover every edge case –which can take forever!– this tutorial recommends best practices. Read the announcement »

Storybook logo

What is Storybook?

Storybook is the most popular UI component development tool for React, Vue, and Angular. It helps you develop and design UI components outside your app in an isolated environment.

Professional developers at Airbnb, Dropbox, and Lonely Planet use Storybook to build durable documented UIs faster.

What you’ll build

Taskbox UI

Taskbox, a task management UI (similar to Asana), complete with multiple item types and states. We’ll go from building simple UI components to assembling screens. Each chapter illustrates a different aspect of developing UIs with Storybook.

📖 Each chapter is linked to a working commit to help you stay in sync.

What’s inside

  1. Get started
    Setup React Storybook in your development environment
  2. Simple component
    Build a simple component in isolation
  3. Composite component
    Assemble a composite component out of simpler components
  4. Data
    Learn how to wire in data to your UI component
  5. Screens
    Construct a screen out of components
  6. Testing
    Learn the ways to test UI components
  7. Addons
    Learn how to integrate and use addons using a popular example
  8. Deploy
    Deploy Storybook online with GitHub and Netlify
  9. Conclusion
    Put all your knowledge together and learn more Storybook techniques
  10. Contribute
    Help share Storybook with the world

Who’s this for?

This tutorial is for developers of all skill levels that are new to Storybook. If you follow along, you’ll be able to grasp the core concepts of isolated UI component development and build a full UI in Storybook without issue.

We assume that you’re familiar with basic JavaScript, components, and web development. If you already use Storybook, checkout the official docs for API documentation or visit Chroma on Medium for more resources like this.

How long does it take?

Developer time is precious. This tutorial covers the key parts of Storybook to get you started as quickly as possible. Finish it in less than two hours. If you’re an experienced developer even shorter. Our aim is to be the most efficient way to onboard to Storybook.

Let's learn Storybook!