14 docs tagged with "designsystem"

A chapter that applies the cva, cn, Slot, and design-token patterns learned with Button to Badge, Input, Card, and Alert. We summarize a pattern-selection guide per component and design best practices.

In this chapter, you learn declarative management of style variants with cva (class-variance-authority). You understand what cva does internally, including what it "does not do" (conflict resolution).

A chapter that explains where the color of bg-primary comes from. You learn the two layers of design tokens (primitive / semantic), OKLCH colors, token definitions with Tailwind v4's @theme inline, and how light / dark themes work.

Targets React 19 / Tailwind CSS v4 / the latest shadcn/ui. A 13-chapter guide that uses the Button to teach reusable component design aligned with a design system through design tokens, cva, cn, and Radix Slot.

A chapter on building a development environment for learning the shadcn/ui Button with Vite + React 19 + TypeScript + Tailwind CSS v4. It walks through installing cva, clsx, tailwind-merge, and radix-ui, creating the cn function, and configuring path aliases.

In this chapter, you learn how to access DOM elements using ref. We focus on the new React 19 style where ref is a normal prop, and also cover the traditional forwardRef.

The final chapter that brings the design-token, cva, cn, Slot, and type patterns learned with Button into a single design system made of three layers (design tokens / primitives / patterns). It also introduces points for team operation and the next steps.

A hands-on exercise that starts from a plain button and stacks Tailwind design tokens, cva, cn, asChild (Slot), and TypeScript types one step at a time to complete a shadcn/ui-style Button component from scratch. It includes bonus exercises for adding a success variant and a loading state.

A chapter that digs into the internal behavior of clsx and tailwind-merge, which make up the shadcn/ui cn function, along with actual results. You learn about excluding falsy values, conflict resolution via conflict groups, and why the order is clsx then twMerge.

In this chapter, you learn about radix-ui's Slot and the asChild pattern. We explain the idea of "composition", which swaps the rendered HTML element while preserving the styling.

A chapter that teaches the utility-first idea of Tailwind CSS by breaking down the actual class list of the shadcn/ui Button. It explains layout, state modifiers (hover / focus-visible / disabled), the spacing scale, and an entry point into design tokens.

A chapter that previews the finished form of the shadcn/ui Button component you build in this book. You grasp the big picture and basic usage of the techniques in play, such as cva, cn, Radix Slot, design tokens, and React 19's ref.

The introductory chapter of a guide that teaches design system design using the shadcn/ui Button. It explains the book's goal, who it is for, the structure of all 13 chapters, and why the Button is the ideal subject for component design.

In this chapter, you learn about the TypeScript types that power the shadcn/ui Button. We cover props definitions using React.ComponentProps, VariantProps, and intersection types, and why React 19 no longer needs forwardRef generics.