Filter/Tag
12 entries
Tie it together: a cva-based variant system, a sortable/filterable data table with TanStack Table, a command palette with cmdk, toasts with sonner, and the composition patterns of a real dashboard. With a live capstone demo.
The hardest UI, done right: one zod schema as the single source of truth, react-hook-form for performant state, and shadcn Form components for accessible, type-safe, validated forms. With a live form lab.
How the CSS-variable theme works, building light/dark, generating a brand theme, customizing a copied component, and the registry system for sharing your own. With a live theme generator.
Why shadcn is "not a component library", how the CLI and components.json work, and adding your first components — the moment Tailwind, Radix and cva/cn click into one workflow. With a live component gallery.
Go pro with Radix: controlled vs uncontrolled state, the asChild slot pattern to merge behavior onto your own components, and Tabs/Switch/Tooltip/Popover composition — the toolkit before shadcn ties it together. With a live composition lab.
The second pillar: why headless components exist, installing Radix, the Root/Trigger/Portal/Content anatomy, and building a fully accessible Dialog and DropdownMenu styled with Tailwind. With a live anatomy + a11y demo.
Round out a pro setup: the typography plugin for prose, forms for sane inputs, tw-animate for enter/exit motion, and writing your own utilities and variants in v4 with @utility and @custom-variant. With a live plugin showcase.
The moment classes repeat you need components — and the professional toolchain shadcn itself uses: clsx for conditionals, tailwind-merge to resolve conflicts, the cn() helper, and cva for type-safe variants. With a live variant factory.
Style on interaction and context: hover/focus/active/disabled, the group-* and peer-* patterns, and data-[state] styling — the exact mechanism Radix and shadcn rely on. With a live state explorer.
The heart of Tailwind v4: define your own colors, fonts, spacing and radius as design tokens with @theme — each token becomes a utility automatically. Plus the v4 way to do dark mode. With a live token studio.
The utilities you reach for every day: spacing, sizing, typography and color, then the two layout engines — Flexbox and Grid — the Tailwind way, plus the mobile-first responsive system. With a live flex/grid builder.
Start from zero: why utility-first CSS exists, the one idea that makes Tailwind click, and a complete v4 setup with Vite — install, @import, @theme, and your first composed component. With a live playground.