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.
+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
    Deploy
    Learn how to deploy Storybook online
  7. 7
    Testing
    Learn the ways to test UI components
  8. 8
    Addons
    Learn how to integrate and use addons using a popular example
  9. 9
    Conclusion
    Put all your knowledge together and learn more Storybook techniques
  10. 10
    Contribute
    Help share Storybook with the world
  11. 11
    Bonus: Creating addons
    Learn how to build your own addons that will super charge your development

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.

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