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: English, Español, Português, 简体中文, 繁體中文
+42
Contributors
11
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
    Setup 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
    Testing
    Learn the ways to test UI components
  7. 7
    Addons
    Learn how to integrate and use addons using a popular example
  8. 8
    Creating addons
    Learn how to build your own addons that will super charge your development
  9. 9
    Deploy
    Deploy Storybook online with GitHub and Netlify
  10. 10
    Conclusion
    Put all your knowledge together and learn more Storybook techniques
  11. 11
    Contribute
    Help share Storybook with the world

What you'll build

React
Vue
Angular

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 Acorns
loading
Daniel Duan
Engineer at Squarespace