Back to tutorials

Intro to 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. Learn Storybook to create bulletproof UI components, along the way you’ll build an app UI from scratch.
Languages: EnglishEspañol日本語PortuguêsالعربيةDeutschFrançaisItaliano한국어Nederlands简体中文正體中文
42+
Contributors
10
Chapters
Intro to Storybook

Overview

Intro to Storybook teaches 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. Professional developers at Airbnb, Dropbox, and Lonely Planet use Storybook to build durable documented UIs faster.

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

What you'll build

React
React Native
Vue
Angular
Svelte

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.

Authors
loading
Tom Coleman
Storybook core
loading
Dominic Nguyen
Storybook design
Reviewed by
loading
João Cardoso
Engineer
loading
Carlos Vega
Engineer
loading
Carlos Iván Suarez
Engineer
loading
Kyle Holmberg
Engineer at Air
loading
Daniel Duan
Engineer at Squarespace
Join the community
6,616 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI