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 and Angular coming soon).

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 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.

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.

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. Deploy

   Deploy Storybook online with GitHub and Netlify
8. Conclusion

   Put all your knowledge together and learn more Storybook techniques
9. Contribute

   Help share Storybook with the world

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.

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.