Building a Component Library with Storybook

Introduction

Throughout this guide you'll learn how to build a component library using Storybook.

Why build a component library with Storybook?

  • Self documenting
  • Iterate on components independently of the rest of your application
  • Reduced code duplication
  • Less bugs
  • Intentional and clear API
  • Free components tests

Throughout this class I'm referencing a form design by Emmanuel Torres. I'll discuss my through process on how I break a UI into components in a later lesson.

How to Use This Guide

  1. Watch the lessons first! I would suggest watching the lessons in their entirety first (don't try to code along). After the video is complete checkout the code below. Just focus on absorbing the information.
  2. Do the exercise at the end of the guide. Take what you learned and try it out! Reference the previous videos when you need to.
  3. Implement it in your app (if needed). By allowing yourself to learn, the try (and make mistakes) you'll have some repetition in place before you go and try to implement things in your app which means you can make mistakes in a lower stakes environment.

Let's start!