Designing a Design System with the shadcn/ui Button
About this guide
This guide targets React 19 / Tailwind CSS v4 / the latest shadcn/ui. Using the shadcn/ui Button as the subject, you learn how to design reusable components aligned with a design system through design tokens, cva, the cn function, and Radix Slot, across 13 chapters.
By the time you finish this guide, you will be able to do the following.
Design reusable components yourself, following design system best practices (design tokens, declarative variants, safe customization, composition, type safety).
Who this guide is for
- You understand the basics of React (components, props, state)
- You have used basic Tailwind CSS classes
- You want to read and understand
shadcn/uicode
Structure of the guide
The learning path
The guide is organized into four parts, progressing in order from the basics to practice.
| Part | Theme | Chapters | What you learn |
|---|---|---|---|
| Fundamentals | Introduction and basics | 4 | Introduction / environment setup / final form / Tailwind |
| Design System | Managing color by meaning | 1 | Design tokens |
| Core Techniques | The techniques behind the Button | 5 | cva / cn / ref / Slot / TypeScript |
| Practice | Apply it hands-on | 3 | Hands-on practice / Going further / From a Button to a design system |
Chapters
Fundamentals
- Introduction
- Environment setup (React 19 + Vite + Tailwind v4)
- Take a look at the finished form
- Tailwind CSS basics
Design System
Core Techniques
- cva: declarative variant management
- The cn function: clsx and tailwind-merge
- Forwarding ref (React 19)
- Radix UI's Slot (asChild)
- Integrating with TypeScript
Practice
- Build a Button from scratch
- Going further: applying it to other components
- From a Button to a design system
Now, let's start with the Introduction.