Building a design system in Next.js with Tailwind
summary
Concrete recipe for a working design system: Next.js plus Tailwind for theme tokens, TypeScript path aliases for clean imports, class-variance-authority (CVA) to manage button variants and get proper types, and Headless UI for keyboard-accessible primitives. The demo builds a reusable Button, a dropdown Menu, and Storybook stories; components accept typed variant props, render correctly in the app and in Storybook, and keyboard interaction works as expected. The claim is that this stack reduces boilerplate and keeps accessibility intact.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:46Build vs use libraries
- 2:28Tailwind for design systems
- 4:13Conditional styling with clsx/CVA
- 5:36Accessibility in components
- 5:56TypeScript path aliases
- 6:39Storybook for testing
- 7:23Demo: Button with CVA
- 9:54Accessible dropdown with Headless UI
- 11:39Storybook setup
- 13:00Closing
related talks
21mDesign Systems 101: The Developer Approach to Better Frontends
27mBuilding Design Components with Tailwind
25mRapid development with Vue.js and Tailwind
59mLessons learnt building a design system
35mDesign system - From a Developer Point-of-View
27mStyles & SASSy: Choosing the Right React Styling Solution
31mUnleashing designers with Tailwind
41mBuilding a design system with React in 2025, what's new?