The goal of this book and what you will learn

About this book

This book is for people who have just started learning React and Tailwind CSS. It explains how to design reusable, consistent components aligned with a design system, using the Button from shadcn/ui as the subject.

shadcn/ui is a collection of UI components widely used in recent React development. Rather than installing it as a library, you copy the code into your own project and customize it freely. That is exactly why understanding its "internals" is worthwhile.

This book targets React 19 / Tailwind CSS v4 / the latest shadcn/ui.

By the time you finish this book

The goal is for you to be able to do the following.

Design reusable components yourself, following design system best practices (design tokens, declarative variants, safe customization, composition, type safety).

The Button is the gateway to this. Once you understand the Button deeply, you can apply the same principles to other components such as Card, Input, and Dialog.

Who this book is for

• You understand the basics of React (components, props, state)
• You have used basic Tailwind CSS classes (such as p-4 and text-sm)
• You want to learn how to design components that are easy to reuse
• You want to read and understand shadcn/ui code

info

If React or Tailwind CSS is completely new to you, we recommend learning the basics from the official tutorials first, then coming back to this book.

Why the Button component?

A button looks the simplest, yet it packs in all the essential challenges of component design.

The design challenges packed into a Button
├─ Multiple variants (default / secondary / destructive…)
├─ Multiple sizes (sm / default / lg / icon…)
├─ Style customization (overrides by the user)
├─ Consistent color and theme (design tokens)
├─ Semantic HTML (button or a)
└─ DOM access (focus, measurement…)

These are the very building blocks of a design system. So being able to "build a Button correctly" is the first step toward being able to "build components aligned with a design system."

The structure of this book and what you will learn

This book progresses from the foundations to practice: Fundamentals → Design System → Core Techniques → Practice.

Part	Chapter	What you learn
Fundamentals	Introduction (this chapter)	The book's goal and the big picture of a design system
Fundamentals	Environment setup	Setting up React 19 + Vite + Tailwind CSS v4
Fundamentals	Take a look at the finished form	Grasp the big picture of the Button you will build
Fundamentals	Tailwind CSS basics	Utility-first and state modifiers
Design System	Design systems and tokens	Manage color and spacing by "meaning" (@theme / OKLCH)
Core Techniques	cva	Manage variants declaratively
Core Techniques	The cn function	Combine classes safely with clsx + tailwind-merge
Core Techniques	Forwarding ref	Access the DOM in React 19
Core Techniques	Radix UI Slot	Swap elements with asChild (composition)
Core Techniques	TypeScript	Type-safe components
Practice	Hands-on	Implement a Button from scratch
Practice	Going further	Apply the patterns you learned to other components
Practice	Wrap-up	From a Button to a design system

How to work through this book

This book is meant to be read in order. In particular, from the chapter on design tokens onward, each chapter builds on the previous ones. Each chapter includes the following elements.

• Conceptual explanation: why that technique is needed
• Working code examples: the code in this book is verified to work on the latest versions
• Diagrams: understand the mechanism visually
• Summary: a review of the key points

info

We strongly recommend learning by actually writing and running the code, not just reading. In the next chapter, we set up the environment for that.

Let's get started

In the next chapter, we set up the development environment needed for this book (React 19 + Vite + Tailwind CSS v4).