Skip to content
Static site and content for Storybook tutorials
Branch: master
Clone or download
kylesuss Merge pull request #123 from lipd/patch-1
Remove redundant usage of "jest" in React zh-CN translation
Latest commit aec6e58 Jul 18, 2019

Learn Storybook

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

Example app code

Taskbox UI

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

Who made

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.


You can’t perform that action at this time.