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