Ultimate ShadCN Tutorial 2025 - React Next.js ShadCN Dashboard Project

This comprehensive tutorial guides beginners through building a complete dashboard application using React, Next.js, and the ShadCN UI library. Learn the fundamentals of Radix UI and ShadCN, from installation and custom styling to advanced theming. Master essential dashboard components including responsive navbars, collapsible sidebars with nested menus, data visualization with various chart types using Recharts, and complex data tables with Tanstack React Table. Explore practical implementations of UI elements like cards, calendars, popovers, breadcrumbs, hover cards, progress bars, and sheets. Develop form validation skills using Zod and react-hook-form while creating a fully functional user profile page. The 2-hour 42-minute tutorial includes complete source code access and covers both basic concepts and advanced techniques for creating professional, responsive web applications with modern UI components.

Syllabus

00:00 Introduction
00:58 What is Radix UI and ShadCN UI?
02:39 How to install ShadCN UI?
05:51 ShadCN Variants and Custom Styling
09:24 ShadCN Custom Theming
12:37 What is CN in Tailwind and ShadCN?
15:27 Next.js Dashboard Design with ShadCN
17:41 ShadCN Navbar Design
20:17 ShadCN Dropdown Menu Tutorial
24:34 What is SR-ONLY Class Name?
26:06 What is asChild in Radix UI and ShadCN?
27:10 ShadCN Dark Mode Tutorial
32:27 ShadCN Sidebar Tutorial
45:06 Collapsing Sidebar and Creating a Custom Collapse Button
48:30 ShadCN Sidebar Actions
51:05 ShadCN Collapsible Sidebar Groups
53:44 ShadCN Sidebar Badges
54:27 ShadCN Sidebar Nested Items Sub Menu
57:38 Creating a Grid Layout
01:00:19 ShadCN Charts Tutorial
01:08:37 ShadCN Area Chart with Recharts
01:13:00 ShadCN Pie Chart with Recharts
01:18:18 ShadCN Card Component Tutorial
01:27:53 ShadCN Scroll Area and Checkbox
01:33:24 ShadCN Calendar and Popover Tutorial
01:41:48 ShadCN BreadCrumb Component
01:43:36 Designing the User Profile Page
01:46:50 ShadCN Hover Card Component
01:51:12 ShadCN Progress Bar Component
01:54:56 ShadCN Sheet Component
01:58:28 ShadCN Form and Input Component
01:59:23 How to Validate Inputs with Zod and react-hook-form
02:10:18 Creating a User Card
02:12:16 ShadCN Line Chart Tutorial
02:17:03 ShadCN Table and Data Table Tutorial
02:18:06 ShadCN Data Table with Tanstack React Table
02:26:00 Tanstack Table Custom Headers and Cells
02:29:39 Tanstack Table Action Button with ShadCN
02:31:47 Tanstack Table Pagination
02:34:46 Tanstack Table Sorting Columns
02:37:24 Tanstack Table Row Selection
02:41:35 Outro