Free course

shadcn/ui Course

Learn the open-code component model, compose accessible interfaces, build and validate forms, create themes, review registries, and maintain the code you own.

5 modules · 25 lessons · No signup

Prerequisites: React, TypeScript, Tailwind CSS and Next.js

~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build an accessible, responsive, themed product interface with shadcn/ui components, a validated form, a focused client boundary, and a clear maintenance path.

Take this course offline

Subscribe to my newsletter to get every free book and course in PDF and EPUB format.

Get the downloads

Course contents

  1. Open-code foundations

    Set up the current CLI, understand components.json, and inspect generated code.

    1. ✓ What shadcn/ui is
    2. ✓ Create a current project
    3. ✓ Read components.json
    4. ✓ Add and inspect a Button
    5. ✓ Check your understanding: open-code foundations

  2. Compose components

    Build product components, variants, semantic controls, and an accessible dialog.

    1. ✓ Compose instead of wrapping everything
    2. ✓ Work with variants and cn()
    3. ✓ Preserve native semantics
    4. ✓ Build an accessible Dialog
    5. ✓ Check your understanding: compose components

  3. Forms and feedback

    Create semantic fields, validate data, expose errors, and communicate mutation state.

    1. ✓ Build a semantic form
    2. ✓ Validate with React Hook Form and Zod
    3. ✓ Render accessible field errors
    4. ✓ Show pending, success, and failure
    5. ✓ Check your understanding: forms and feedback

  4. Themes and registries

    Create themes, add dark mode, customize owned code, and assess third-party sources.

    1. ✓ Understand theme tokens
    2. ✓ Implement dark mode
    3. ✓ Customize the code you own
    4. ✓ Evaluate third-party registries
    5. ✓ Check your understanding: themes and registries

  5. Build a product interface

    Adapt blocks, test responsive behavior, place client boundaries, and audit the result.

    1. ✓ Start from a block without surrendering the design
    2. ✓ Make the layout responsive
    3. ✓ Place Next.js client boundaries
    4. ✓ Audit and maintain the interface
    5. ✓ Check your understanding: build a product interface