shadcn/ui Deconstructed
Shadcn/ui is not only great for building beautiful user interfaces, but it’s also an excellent way to learn coding patterns and techniques to build a robust set of UI components or a design system. In this series, we will reverse-engineer the code generated by shadcn/ui to explore various composition patterns and styling techniques.
Series episodes
Introduction (2)
Introduction
1m 37sExplore shadcn/ui in this series to learn coding patterns and build beautiful, robust UI components with hands-on reverse engineering.
CLI-Driven Code Generation
7m 59sBuild a fresh Laravel React project and learn how shadcn/ui CLI simplifies adding components with clear Git diffs and step-by-step guidance.
Styling Utilities (4)
The cn Function, Part 1: clsx
14m 42sDive into the cn utility from shadcn/ui and master how it simplifies styling across components in this clear, hands-on exploration.
The cn Function, Part 2: Tailwind Merge
10m 57sExplore how Tailwind Merge fixes class conflicts with clsx in shadcn/ui, ensuring styles apply correctly through practical DOM inspection.
Multi-Style Variant Components
17m 36sLearn to build multi-style variant buttons by dissecting shadcn/ui’s Button component and creating your own from scratch with clear, hands-on steps.
Class Variance Authority
9m 22sDiscover how Class Variance Authority (cva) simplifies managing multi-style variants, making component styling easier and more efficient.
Composition and Theming (4)
The asChild Prop
14m 39sLearn how the asChild prop in shadcn/ui lets you render components as different elements by recreating it from scratch with Radix UI’s Slot.
Component Composition
33m 18sMaster flexible UI design by using React’s children prop to simplify component composition and avoid complex props APIs.
Compound Components
24m 36sLearn how compound components share state and logic within a root component to create seamless, maintainable UI with embedded behavior.
Theming
13m 24sExplore shadcn/ui theming with semantic tokens and theme scopes to build powerful, flexible multi-theme strategies with ease.
