Learn Storybook teaches you Storybook by building a UI from scratch. We walk through core concepts from building and testing to deployment. This tutorial is intended to get you up to speed on Storybook best practices in a fast and approachable way.

Contributions to Learn Storybook are encouraged! If it’s something small like grammar or punctuation, open up a pull request. If it’s a bigger change, add an issue for discussion.

You'll find the chapters in the /content directory.

We need help translating Learn Storybook to new languages. Find out more » Traditional Chinese translation is converted from Simplified Chinese using OpenCC. Please help us correct any idiomatic errors.

If you want to add a new chapter, create an identically named file in content/react/en and in content/react/es. If you are unable to write in one of the required languages, simply add

---
title: "[Title-cased Filename]"
tocTitle: "[Headline on page]"
description: "[A general description of what you're learning about on this page.]"
---

Coming Soon

to that localized file, and a translator will assist in finishing out the PR when possible. Once the content is created, add the file name to the toc array in gatsby-config.js

You'll build Taskbox UI as part of the tutorial. Find the finished code below with commits synced to the chapters.

📕 GitHub repo: chromaui/learnstorybook-code

The text, code, and production were contributed by Chroma. The tutorial was inspired by Chroma’s popular GraphQL + React tutorial series

Install packages and run with yarn develop.

• Tom Coleman @tmeasday
• Dominic Nguyen @domyen
• Carlos Iván Suarez @icarlossz
• Luciano M. Guasco @luchux
• yobrave
• Daniel Duan
• Carlos Vega
• Matt Rothenberg
• Kyle Holmberg
• You? Become an OSS contributor