ShadCN Tutorial for beginners. ShadCN Radix UI course. Design a Dashboard with React Next.js and ShadCN UI Library.

If it is valuable to you, you can support Lama Dev.
Join: https://www.youtube.com/channel/UCOxWrX5MIdXIeRNaXC3sqIg/join

Join Lama Dev groups
X / Twitter: https://x.com/lamawebdev
Facebook: https://www.facebook.com/groups/lamadev
Instagram: https://www.instagram.com/lamawebdev
Discord: https://discord.gg/yKremu4mPr

Source Code: https://github.com/safak/shadcn

VSCode React snippets: https://github.com/safak/snippets

Why OKLCH?: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

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

Reinier

Next.js

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn about the flexible and customizable ShadCN UI library, its integration with Radix UI for accessibility, and Tailwind CSS for styling. This tutorial covers building a responsive dashboard from scratch with components such as forms, dark mode, and more. Emphasizes the unique approach of ShadCN, where components are not pre-styled, allowing developers full control over the design.

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

Great overview of ShadCN UI! I really appreciate how it highlights the flexibility and design freedom it offers compared to other UI libraries. The integration with Radix for accessibility and Tailwind for styling is super practical. Looking forward to trying it out in a dashboard project—especially interested in how it handles dark mode and form components. Thanks for the detailed tutorial!

damn, that was a great watch! … taking this transcript to gemini … gonna see what it can make with that alone. thanks for the knowledge!

Have been through first 30 mins of video and i must say its a good one, thanks for sharing.