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çais한국어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
    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
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify