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 foundations to practice.
| Part | Theme | Chapters | What you learn |
|---|---|---|---|
| Fundamentals | Introduction and foundations | 4 | Introduction / environment setup / the finished Button / Tailwind basics |
| Design System | Managing color by meaning | 1 | Designing design tokens (OKLCH) |
| Core Techniques | The techniques behind the Button | 5 | cva / cn / ref forwarding / Radix Slot / TypeScript integration |
| Practice | Apply it hands-on | 3 | Build from scratch / apply to other components / toward 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.