Build a SaaS Admin Dashboard with React, Shadcn UI & TypeScript
In this video, you will learn how to build a modern SaaS Admin Dashboard using React, Shadcn UI, and TypeScript. We will build a professional "Vendor Security" interface featuring responsive charts, advanced data tables with sorting and pagination, and a beautiful dark mode UI.
By the end of this tutorial, you will have a production-ready dashboard template that you can use for your own SaaS projects or client work.
🔗 Essential links
- Assets: https://drive.google.com/file/d/11u2nuU8XYKQk7W7onWxAWZVCnh3l6pk6/view?usp=sharing
- GitHub gist: https://gist.github.com/codewithsadee/425d0351bfd082cb47109e6daa2d5335
- Source Code: https://www.patreon.com/posts/new-react-source-144446490?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
- Source Code2: https://buymeacoffee.com/codewithsadee/e/482916
📝 What You Will Learn in This Course:
➖ How to setup a React project with TypeScript & Tailwind CSS
➖ Installing and customizing Shadcn UI components
➖ Building "Vendor Breakdown" charts using Recharts (or your specific chart lib)
➖ Creating an Advanced Data Table (Vendor Movements)
➖ Implementing Search, Column Sorting, and Pagination
➖ Custom cell rendering (Status badges, Progress bars, Action buttons)
➖ Responsive design best practices for Dashboards
🛠️ Tech Stack Used:
➖ React (with TypeScript)
➖ Shadcn UI (Radix UI + Tailwind CSS)
➖ Recharts (for Data Visualization)
➖ Lucide React (Icons)
➖ Vite (Build Tool)
⭐️ Timestamps:
0:00 Intro
2:18 Project demo
5:57 Project initial
11:23 Shadcn UI setup
16:13 Theme toggle functionality
17:50 App sidebar
24:04 Change theme
24:49 App sidebar
42:33 Header
51:57 Page & Page header
57:43 Dashboard card
1:04:26 Dashboard Bar chart
1:13:14 Dashboard Radial chart
1:24:49 Dashboard Table
1:30:03 Advance Data table
2:10:45 Final demo
👋 Connect With Me:
Twitter/X: https://x.com/codewithsadee_
Instagram: https://instagram.com/codewithsadee
LinkedIn: https://linkedin.com/in/codewithsadee
Top comments (0)