Udemy

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

立即報名
  • 1,970 名學生
  • 更新於 11/2025
4.8
(310 個評分)
CTgoodjobs 嚴選優質課程,為職場人士提升競爭力。透過本站連結購買Udemy課程,本站將獲得推廣佣金,有助未來提供更多實用進修課程資訊給讀者。

課程資料

報名日期
全年招生
課程級別
學習模式
修業期
7 小時 31 分鐘
教學語言
英語
授課導師
Tom Phillips, WebDevEducation (Tom Phillips)
評分
4.8
(310 個評分)
7次瀏覽

課程簡介

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)

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.

課程章節

  • 7 個章節
  • 48 堂課
  • 第 1 章 Introduction
  • 第 2 章 Build the landing page
  • 第 3 章 Build the login page
  • 第 4 章 Build the sign up page
  • 第 5 章 Build the dashboard layout
  • 第 6 章 Build the My Dashboard page
  • 第 7 章 Extras

課程內容

  • 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


評價

  • E
    Eckhardt Doennebrink
    5.0

    Very good learning experiance

  • M
    Mark van der Merwe
    5.0

    Without this course all other Next.js courses are too painful. Great build. Don't expect that you won't have to solve some compiling issues though.

  • C
    Casper Kaandorp
    5.0

    Clear explanations, good pace and I am learning some nextjs stuff as well.

  • B
    Brandon Turner
    5.0

    Great course for learning shadcn UI. I would recommend this to anyone that wants to understand shadcn UI

立即關注瀏覽更多

本網站使用Cookies來改善您的瀏覽體驗,請確定您同意及接受我們的私隱政策使用條款才繼續瀏覽。

我已閱讀及同意