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

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

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.

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