Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

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.

Progress

Series Info

Episodes
10
Run Time
2h 28m
Difficulty
Advanced
Last Updated
May 20, 2025
Version
Latest
Play Series

Series Episodes

  1. Introduction (2)

    1. Introduction

      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.

    2. CLI-Driven Code Generation

      Let’s create a fresh Laravel project using the React Starter Kit. After taking a brief look at what’s included, we’ll delete unnecessary files and pretend we’re adding shadcn/ui components from scratch. We’ll use Git diffs to observe what happens when we install a Button component with the shadcn/ui CLI.
  2. Styling Utilities (4)

    1. The cn Function, Part 1: clsx

      Our first exploration focuses on the cn utility function exported by shadcn/ui. It’s used extensively across components, and it’s important to understand how it works. Let’s dive in!

    2. The cn Function, Part 2: Tailwind Merge

      By combining class strings with clsx, we encountered issues where certain styles weren’t applied correctly. Let’s inspect the class attribute in the DOM to understand the problem and explore how the Tailwind Merge library can resolve it.

    3. Multi-Style Variant Components

      Let’s examine what it takes to support multiple style variants for a UI component. We’ll analyze the anatomy of the Button component in shadcn/ui and recreate our own multi-style button component from scratch.

    4. Class Variance Authority

      The manual setup of multi-style variant support we implemented in the previous episode provides the perfect context to demonstrate how Class Variance Authority (cva) streamlines managing multiple style combinations for a component.
  3. Composition and Theming (4)

    1. The asChild Prop

      The asChild prop in shadcn/ui is useful for rendering a component as a different HTML element. It leverages Radix UI’s Slot utility under the hood. Let’s break it down and recreate a basic version from scratch.

    2. Component Composition

      It’s easy to fall into the trap of creating a complicated ad-hoc props API for UI components. React’s children prop enables simpler, more flexible component composition.

    3. Compound Components

      Compound components elevate composition by embedding implicit state and logic within the root component. Sub-components are intended for use only inside the root component, as they share internal behavior.

    4. Theming

      The theming setup in shadcn/ui is conceptually simple yet powerful. Let’s explore how semantic token names, combined with theme scopes, enable an elaborate multi-theme strategy.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes