FREE TUTORIALS · Learn from zero to expertBusiness DirectoryPut Your Business Ad Here — Free
Independent course disclaimer · expand / collapse

These are independently developed tutorials. Technology names belong to their respective owners; no endorsement is implied. Examples are educational, not guarantees. Verify commands, costs, security, browser support, and framework versions before production use. Google Translate requires internet and can make mistakes. Terms · Privacy · Legal.

Fundamentals → Mastery guide · Six levels, practical projects, topic checklist, worked code and results.
EasyTutorGuide · Free practical course · Six levels

shadcn/ui — from absolute beginner to advanced professional practice

Start without knowing any terminology. Work through the chapters in order, read the small explanations, edit the code, check the visible output, and answer twenty practice questions in every chapter.

145 chapters6 levels20 answered questions per chapterMobile + RTL/LTRYouTube narration flow

Start Chapter 1

Level 1 · Absolute Beginner

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 1: What shadcn UI Actually Is
  2. Chapter 2: React Prerequisites
  3. Chapter 3: Understand Open Source Components
  4. Chapter 4: Choose Next.js or Vite
  5. Chapter 5: Initialize a Project
  6. Chapter 6: Run the shadcn CLI
  7. Chapter 7: Configure Tailwind CSS v4
  8. Chapter 8: Create Components Configuration
  9. Chapter 9: Understand cn Helper
  10. Chapter 10: Add Button Component
  11. Chapter 11: Button Variants and Sizes
  12. Chapter 12: Add Card Component
  13. Chapter 13: Card Header and Content
  14. Chapter 14: Add Input Component
  15. Chapter 15: Label Form Controls
  16. Chapter 16: Use Separator Component
  17. Chapter 17: Badge Styles
  18. Chapter 18: Avatar Component
  19. Chapter 19: Typography Patterns
  20. Chapter 20: Responsive Layout Basics
  21. Chapter 21: Work with Lucide Icons
  22. Chapter 22: Compose Simple Components
  23. Chapter 23: Theme Color Tokens
  24. Chapter 24: Project: Profile Dashboard

Level 2 · Foundation

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 25: Button Disabled State
  2. Chapter 26: Accessible Focus States
  3. Chapter 27: Input and Textarea
  4. Chapter 28: Checkbox Component
  5. Chapter 29: Radio Group
  6. Chapter 30: Switch Component
  7. Chapter 31: Select Component
  8. Chapter 32: Combobox Search
  9. Chapter 33: Popover Component
  10. Chapter 34: Tooltip Component
  11. Chapter 35: Dialog Component
  12. Chapter 36: Alert Dialog
  13. Chapter 37: Drawer Component
  14. Chapter 38: Sheet Component
  15. Chapter 39: Accordion Component
  16. Chapter 40: Tabs Component
  17. Chapter 41: Dropdown Menu
  18. Chapter 42: Navigation Menu
  19. Chapter 43: Menubar Component
  20. Chapter 44: Breadcrumbs
  21. Chapter 45: Pagination Component
  22. Chapter 46: Toast and Sonner Notices
  23. Chapter 47: Skeleton Loading
  24. Chapter 48: Project: Account Settings

Level 3 · Intermediate

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 49: React Hook Form Integration
  2. Chapter 50: Zod Schema Validation
  3. Chapter 51: Field Component Patterns
  4. Chapter 52: Form Error Messages
  5. Chapter 53: Input OTP Component
  6. Chapter 54: Calendar Component
  7. Chapter 55: Date Picker Pattern
  8. Chapter 56: Data Table with TanStack Table
  9. Chapter 57: Table Sorting
  10. Chapter 58: Table Filtering
  11. Chapter 59: Table Pagination
  12. Chapter 60: Row Selection
  13. Chapter 61: Command Menu
  14. Chapter 62: Sidebar Component
  15. Chapter 63: Resizable Panels
  16. Chapter 64: Scroll Area
  17. Chapter 65: Progress Component
  18. Chapter 66: Slider Component
  19. Chapter 67: Collapsible Component
  20. Chapter 68: Hover Card
  21. Chapter 69: Context Menu
  22. Chapter 70: Aspect Ratio Component
  23. Chapter 71: Carousel Component
  24. Chapter 72: Project: Admin Table

Level 4 · Advanced

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 73: Theme Variables in CSS
  2. Chapter 74: Dark Mode with Next Themes
  3. Chapter 75: Design Token Architecture
  4. Chapter 76: Tailwind Component Variants
  5. Chapter 77: Class Variance Authority
  6. Chapter 78: Composition Over Wrapping
  7. Chapter 79: Base UI and Radix Choices
  8. Chapter 80: Accessible Keyboard Navigation
  9. Chapter 81: Dialog Focus Trap
  10. Chapter 82: Avoid Nested Interactive Controls
  11. Chapter 83: Controlled and Uncontrolled Props
  12. Chapter 84: Build Custom Component Variant
  13. Chapter 85: Refactor Component Source
  14. Chapter 86: Use Compound Components
  15. Chapter 87: RTL Support and Layout
  16. Chapter 88: Internationalized Form Labels
  17. Chapter 89: Reduced Motion Patterns
  18. Chapter 90: Accessible Error Announcement
  19. Chapter 91: Semantic Table Structures
  20. Chapter 92: Form State Architecture
  21. Chapter 93: Loading and Empty States
  22. Chapter 94: Error Boundaries
  23. Chapter 95: Project: Component Library
  24. Chapter 96: Audit WCAG 2.2

Level 5 · Expert

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 97: shadcn Registry Fundamentals
  2. Chapter 98: Registry Directory and Trust
  3. Chapter 99: Add Components from Registries
  4. Chapter 100: Validate Registry JSON
  5. Chapter 101: Build a Custom Registry Item
  6. Chapter 102: Version Component Code
  7. Chapter 103: CLI Update Strategy
  8. Chapter 104: Share Components Across Apps
  9. Chapter 105: Use pnpm Workspaces
  10. Chapter 106: Monorepo UI Packages
  11. Chapter 107: Next.js App Router Integration
  12. Chapter 108: Vite React Integration
  13. Chapter 109: React Aria Components
  14. Chapter 110: TanStack Query Integration
  15. Chapter 111: Auth Screens
  16. Chapter 112: Multi Step Forms
  17. Chapter 113: Data Tables with Server Data
  18. Chapter 114: Optimistic UI
  19. Chapter 115: Accessibility Testing with Playwright
  20. Chapter 116: Unit Tests for Components
  21. Chapter 117: Visual Regression Testing
  22. Chapter 118: Bundle and CSS Optimization
  23. Chapter 119: Code Review and Security
  24. Chapter 120: Project: CRM Interface

Level 6 · Mastery

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 121: Design a Complete System
  2. Chapter 122: Document Component Contracts
  3. Chapter 123: Construct an App Shell
  4. Chapter 124: Compose Forms at Scale
  5. Chapter 125: Create Advanced Table Views
  6. Chapter 126: Accessible Command Palette
  7. Chapter 127: Multi Locale Navigation
  8. Chapter 128: Multi Theme Support
  9. Chapter 129: Persist User Preferences
  10. Chapter 130: Adaptive Mobile Components
  11. Chapter 131: Dialog Management Strategy
  12. Chapter 132: Complex Form Validation
  13. Chapter 133: Error and Success Messaging
  14. Chapter 134: Authentication and Roles UI
  15. Chapter 135: Secure Rendering of User Content
  16. Chapter 136: Component Regression Suite
  17. Chapter 137: CI for Design System
  18. Chapter 138: Monitor Rendering Performance
  19. Chapter 139: Optimize LCP and INP
  20. Chapter 140: Publish Shared Registry
  21. Chapter 141: Deploy Next.js with Node
  22. Chapter 142: Static Export Constraints
  23. Chapter 143: Capstone: Learning Platform
  24. Chapter 144: Capstone: Booking Dashboard
  25. Chapter 145: Mastery: Design System Review

How to learn like a complete beginner

You do not need to learn every word in one reading. Read the lesson, type the example, look at its real output, change one part, and explain what changed. Return when you have forgotten something. For frameworks requiring an installer or compiler, the source must be tested in a real project—not only in the browser-only illustration.

Suggest an improvement or share a learning idea on the blog.

Disclaimer, trademarks and learning guidance

Independent educational material. External names are used solely to identify subjects. These tutorials are not official training or certification. Output may vary by browser and software version. If a framework requires a build tool, the standalone browser demonstration is an illustration, not execution of the framework source. Always test your own code before publication. Legal notice.