Even if you don’t work on the design systems team at your company, over a long enough period of time, you’re likely to find yourself working on a design system or component library. Having a standardized set of components saves you from having to reinvent the wheel every single time you tackle a new feature. And—arguably more importantly, it allows you to make large-scale changes without the tedium of manually tweaking every single element in your project.

This workshop offers a comprehensive guide to building design systems using Storybook. Covering everything from basic setup to advanced features, attendees will learn about atomic design, accessibility, visual regression testing, responsive design, and dark mode implementation. The workshop emphasizes practical, hands-on learning for effective team collaboration and documentation.

Prerequisites

You’ll need the following in order to follow along with this course. You’ll have a chance to get set up with everything along the way. But, if you want to get a head start, get yourself set up with the tools below.

• A Chromatic account
• Recommended, but not required: pnpm

Libraries and Tools Used

In addition to Storybook, we’ll also be leveraging some other libraries along the way. They’ll be included in any of the example repositories where they’re needed, but I figured it’d be helpful to list them all in one place as well

• Tailwind CSS
• clsx
• Class Variance Authority
• Vite