Using Storybook With React

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. More info

Articles & Tutorials

Getting Started with Storybook: How to Develop React Components Without an App (welearncode.com)
Oct 21, 2020
I wanted to write up some thoughts and a quick tutorial on one of my favorite development tools, Storybook. You can use Storybook which allows you to develop user interface components in isolation.
  • Ali Spittel
What is Storybook and How Can I Use It to Create a Component Library in React? (freecodecamp.org)
Jun 09, 2020
Frameworks like React, Vue, and Angular all help developers create modular systems using components, but that doesn't usually include a good way to see them all from a higher point of view. How can we use Storybook to build libraries and design systems that self-document as we build them?
  • Colby Fayock
Develop Components for your Next.js Site in Isolation with Storybook (dev.to)
Apr 04, 2020
Do you ever just started developing your next website with nextjs and after a while felt unproductive, because all of your components are scattered throughout your site?
  • Mike Barkmin
Testing a Virtual List component with Cypress and Storybook (itnext.io)
Apr 01, 2020
The challenges coming from integrating the tools, the current status of integration, and some best practices to properly test a rendered component.
  • Stefano Magni
Next.js, Storybook, and Lerna: Build a Monorepo Structure (buttercms.com)
Mar 24, 2020
In this tutorial, you'll learn about how to build a monorepo using Lerna. We’ll be building a Next.js application which will import components from a separate package. We’ll also be using Storybook to showcase those components.
  • Nirmalya Ghosh
How design systems use Storybook (medium.com)
Feb 11, 2020
A roundup of the best Storybook techniques from leading design systems.
  • Dominic Nguyen
Dependency discovery in Storybook (medium.com)
Jan 27, 2020
Dependency tracking and analysis made for component libraries.
  • Atanas Stoyanov
Storybook 5.3 (medium.com)
Jan 14, 2020
Storybook has been rapidly evolving to meet this challenge. Now I’m excited to announce our latest release — Storybook 5.3 supercharges building and documenting production design systems.
  • Michael Shilman
Declarative Storybook configuration (medium.com)
Jan 07, 2020
I’m excited to share the new simpler, more declarative way to configure Storybook in 5.3. This makes it easier to accomplish common configuration tasks like adding addons and decorators.
  • Norbert de Langen
State of Storybook 2019 (medium.com)
Dec 19, 2019
Breakout year for Community, Product, and Ecosystem.
  • Michael Shilman
Rich docs with Storybook MDX (medium.com)
Dec 12, 2019
Components & documentation in harmony at last.
  • Michael Shilman
Component Story Format (medium.com)
Jul 29, 2019
Storybook 5.2 introduces Component Story Format (CSF), a new way to author stories based on ES6 modules. Component Stories are simple, easy to read, and decoupled from Storybook’s internal API so you can use them anywhere.
  • Michael Shilman
How React Storybook can simplify component testing (blog.logrocket.com)
Jul 25, 2019
In this post, we will find out how Storybook can help us create UI components and improve our component testing.
  • Raphael Ugwu
Component Development with Storybook and KendoReact (telerik.com)
Jul 23, 2019
Storybook provides a great environment for experimenting with UI components in isolation and through a variety of different configurations. In this article, I'll show you how to get started with Storybook, highlight a few add-ons, and showcase a Storybook built for KendoReact.
  • John Bristowe
How to use Storybook with React (tducasse.netlify.com)
Jun 19, 2019
Storybook is an open source tool for developing UI components in isolation.
  • Thibaud Ducasse
Building a UI Component with React and Storybook (scotch.io)
Jun 11, 2019
In this article, I’ll be explaining how to build an interactive UI component using React and Storybook. We’ll be creating a UI component using Storybook and React and at the end of the tutorial, we’ll deploy the storybook as a stand-alone application to serve as a style guide.
  • Egwuenu Gift
Documenting React Components With Storybook (dev.to)
May 06, 2019
Storybook markets itself as a playground for UI components and its main focus is on “writing stories.”
  • Emma Wedekind
An Introduction To Storybook: Organize How You Build JS Components (scotch.io)
Apr 24, 2019
Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and a host of other frameworks.
  • Egwuenu Gift
How to build a React development playground using Storybook (medium.freecodecamp.org)
Apr 02, 2019
Lately, I have been wanting to try new things and test out new technologies or patterns in my React components. I needed a place where I could test these things out without launching a new app every time.
  • Sarah Sweat
Storybook 5.0 (medium.com)
Mar 05, 2019
Welcome to the future of component development! We’re kicking off 2019 with Storybook 5.0 (SB5), our biggest release to date.
  • Michael Shilman
Reactjs Unit Testing with Storybook + Jest (blog.cloudboost.io)
Sep 23, 2018
Reactjs is a UI library by facebook while Storybookjs is a testing tool for components by representing different states of the component and Jest is another cool unit testing tool by the creators of reactjs for javascript including reactjs.
  • Danstan Onyango
React Native Storybook + Generating individual test files to snapshot (codeburst.io)
Aug 07, 2018
In this post I’ll describe how I got React Native working with Storybook and Storyshots plugin along with a custom script to generate a separate test file per story file.
  • Axel Normand
Visual Regression Testing and React Storybook (robinwieruch.de)
May 16, 2018
This article is all about visual regression testing in React.
Announcing Storybook 3.4 (medium.com)
Apr 25, 2018
Polymer, Image/Vue/Angular Storyshots, Multi-Hierarchy, & more!
  • Michael Shilman
Adding Storybook Style Guide to a Create React App (elijahmanor.com)
Feb 20, 2018
In this post we’ll look at how to add the Storybook style guide to a React web app boostrapped by create-react-app.

Video Guides & Talks

React Storybook Addon Knobs - Edit Props Dynamically (youtube.com)
Jan 18, 2020
In this video, I will show you how to install and use storybook knobs addon to edit properties dynamically in ReactJS.
  • Hong Ly
Build React Apps Fast Using Storybook, DDD, and Atomic Design (youtube.com)
Jul 03, 2019
Building large scale apps in the last years, lead me to a development process that provides rapid results and ability to scale. I want to show these technics, building a real world react app, using storybook, with DDD (design-driven development) and atomic design.
  • Alon Valadji
Get up to speed on Storybook @ ReactNYC (youtube.com)
May 29, 2018
Introducing Learn Storybook - a hands-on tutorial that teaches you the fundamentals of isolated component development. If you’re like me, you may have heard of Storybook and initially overlooked it. Another day, another dev tool. But teams at Airbnb, Dropbox, and Github use it so you might be wondering what the hype is about. This lightning talk briefs you on Storybook and introduces open source tutorial Learn Storybook (React contributors needed).
  • Dominic Nguyen
Build your components with Storybook (youtube.com)
May 07, 2018
You'll soon realize that dealing with your whole app when all you wanna do is build the perfect button is annoying. So build your components in isolation first, then use them in your project.
Getting the most out of your storybook setup (youtube.com)
Apr 13, 2018
Find out what's the best folder structure and the required setup for it. Bonus: Use the same code for generating jest snapshots!
Adding Storybook Style Guide to a Create React App (youtube.com)
Feb 20, 2018
In this post we’ll look at how to add the Storybook style guide to a React web app boostrapped by create-react-app.
React-Storybook: Design, Develop, Document and Debug your React UI components (youtube.com)
Nov 08, 2017
Designing UI React components is not an easy task. They often rely on several states that are hard to reproduce when we are developing in the middle of an existing app. Worst, once a component is live, how do we make sure that its well documented.
  • Marie Laure Thuret

Books & Guides

Learn Storybook (learnstorybook.com)
Apr 10, 2018
Learn Storybook to create bulletproof UI components, along the way you’ll build an app UI from scratch
  • Dominic Nguyen

Courses & Video Series

Design Systems with React & Storybook (frontendmasters.com)
May 12, 2020
In this course, you'll create a design system from scratch and learn the foundational design concepts that go into one. You'll design your components using Figma, then take those designs and turn them into coded components using React.
  • Emma Bostian
Building a Component Library with Storybook (reactnativeschool.com)
Jan 17, 2019
Throughout this guide you'll learn how to build a component library using Storybook.
  • Spencer Carli

Podcast Episodes

Arunoda Susiripala — Building Storybook, Meteor, Next and communities on open source (anchor.fm)
Aug 22, 2020
Arunoda is a prolific open source contributor, having built Storybook, and being a core contributor to MeteorJS and NextJS. He and I talk about how he started his career in open source, which led to him freelancing, then building Kadira (an performance monitoring tool for MeteorJS) and Storybook. After leaving the Meteor community he went on to work with Vercel as a maintainer of NextJS and their core hosting platform.
  • Arunoda Susiripala
  • Matthew Weeks
Tom Coleman on Storybook v6 (reactpodcast.com)
Aug 13, 2020
Tom Coleman tells us what's new in Storybook 6. He elaborates on headline features of controls, composition, and args and how they'll take your component documentation and exploration to the next level!
Storybook: UI Engineering with Zoltan Olah (softwareengineeringdaily.com)
Jan 23, 2019
Zoltan Olah joins the show to talk about Storybook, and his company Chroma. Chroma is building tools to allow design-driven teams to work more effectively. We talked about how the relationship of designers and frontend engineers has some resemblance to the relationship between “dev” and “ops” before the DevOps movement.
  • Zoltan Olah