Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Shadcn UI & Next JS - Build beautiful dashboards with shadcn
Highest Rated
Rating: 4.7 out of 5(354 ratings)
2,357 students

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

shadcn ui - build dashboards with shadcn ui components, including shadcn ui, tailwindcss, and Next JS (shadcn ui 2025)
Last updated 3/2026
English

What you'll learn

  • Increase your value and improve your knowledge as a web developer
  • Learn how to build a dashboard with shadcn ui
  • Learn client side validation with zod and react-hook-form
  • Learn how to create beautiful charts and data visualizations using recharts

Course content

7 sections48 lectures7h 31m total length
  • Important! Read this before you start the course! (Github repo etc)0:55
  • Project overview5:34
  • Udemy ratings and reviews0:38
  • NEW - Set up new Next JS project6:47
  • NEW - Set up shadcn ui8:55

Requirements

  • Have a good understanding of Javascript and React
  • Experience with Tailwind CSS would be beneficial

Description

Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards using Shadcn UI in Next.js. This course is your gateway to mastering the integration of form functionality, client-side validation, component customization, and dynamic chart creation - all key skills for any aspiring web developer. Note that this course focuses only on the front-end. We do not write any backend logic, database, or implement authentication in this course. All data in this course is hardcoded / dummy data. The sole focus of this course is building out beautiful front ends with Shadcn UI.

In this course we'll build "SupportMe" - a fictional dashboard that tracks employees, teams, and customer support tickets.

Why This Course?

  • Focused Learning Path: Concentrate on building a visually appealing, interactive dashboard. By prioritizing frontend technologies, you'll gain proficiency in the most sought-after skills in the web development industry.

  • Hands-On Shadcn UI & Next.js: Learn to leverage Shadcn UI within the Next.js ecosystem, enabling you to create fast, server-rendered React.

  • Forms and Validation with Zod: Dive deep into crafting forms with react-hook-form, and implementing client-side validation using Zod, ensuring data integrity without compromising user experience.

  • Extendable Components: Get creative with Shadcn UI by extending its components. This section empowers you to tailor elements to fit the unique needs of your projects.

  • Styling with Tailwind CSS: Embrace the utility-first approach of Tailwind CSS for styling. You'll learn how to efficiently design your dashboard without leaving the comfort of your HTML.

  • Interactive Charts with Recharts: Visualize data beautifully with Recharts. This module will guide you through integrating responsive and customizable charts into your dashboard for that extra flair.

  • Pure Frontend Focus: All course projects are designed with hardcoded/dummy data. There's no backend complexity or authentication to worry about—purely frontend development to enhance your skills.

Who this course is for:

  • Web developers who want to learn a better approach to building out UI's without having to do it from scratch