shadcn/ui تجزیه و تحلیل شده
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.
قسمتهای دوره
Introduction (2)
Explore shadcn/ui in this series to learn coding patterns and build beautiful, robust UI components with hands-on reverse engineering.
تولید کد مبتنی بر CLI
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)
تابع cn، بخش ۱: clsx
14m 42sDive into the cn utility from shadcn/ui and master how it simplifies styling across components in this clear, hands-on exploration.
تابع cn، بخش ۲: ادغام Tailwind
10m 57sExplore how Tailwind Merge fixes class conflicts with clsx in shadcn/ui, ensuring styles apply correctly through practical DOM inspection.
کامپوننتهای چندسبکی
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)
Prop asChild
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.
ترکیب کامپوننت
33m 18sMaster flexible UI design by using React’s children prop to simplify component composition and avoid complex props APIs.
کامپوننتهای ترکیبی
24m 36sLearn how compound components share state and logic within a root component to create seamless, maintainable UI with embedded behavior.
Explore shadcn/ui theming with semantic tokens and theme scopes to build powerful, flexible multi-theme strategies with ease.
