Sleek Next.JS Applications with shadcn/ui
5h 10m 20s
English
Paid
Course description
Dive into the development of modern web interfaces by learning the fundamentals of shadcn/ui, TailwindCSS, and Radix UI. Learn to create flexible and modular user interfaces and integrate these skills into Next.js projects. This course will help you become a leader in cutting-edge frontend technologies.
During the training, you will master:
- A deep understanding of shadcn/ui and the theory behind it,
- The creation of two fully functional applications ready for production use,
- Skills for working with the library and contributing to its development.
Upon completion of the course, you will confidently master the tools for building modern and high-quality web applications.
Watch Online
0:00
/ #1: Introduction
All Course Lessons (36)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 01:32 | |
| 2 | About the Course | 03:40 | |
| 3 | The shadcn-ui way | 01:30 | |
| 4 | How to create a new shadcn-ui project | 02:17 | |
| 5 | Exploring the shadcn-ui next-template Project Structure | 06:16 | |
| 6 | shadcn-ui Command Line (CLI) Tool | 05:11 | |
| 7 | Typography in shadcn-ui | 04:02 | |
| 8 | Building a News Site - Layout | 05:30 | |
| 9 | Building a News Site - Navigation | 11:55 | |
| 10 | Building a News Site - Fetching Articles | 05:57 | |
| 11 | 1Building a News Site - Home Page | 22:20 | |
| 12 | Building a News Site - Category Page | 11:21 | |
| 13 | Building a News Site - Article Preview | 05:57 | |
| 14 | shadcn-ui Dark Mode | 04:34 | |
| 15 | Theming in shadcn-ui | 08:14 | |
| 16 | Shadcn-ui Styles | 03:12 | |
| 17 | Animations in shadcn-ui | 05:03 | |
| 18 | Layout And Header | 10:52 | |
| 19 | Event Page | 21:23 | |
| 20 | The Event Sheet | 14:09 | |
| 21 | Create a Card Variant in shadcn-ui | 04:43 | |
| 22 | Building The User Context | 11:16 | |
| 23 | Building the Login Button | 04:45 | |
| 24 | Building the Authentication Form | 14:35 | |
| 25 | Finish the Authentication Flow | 06:11 | |
| 26 | RSVP Functionality | 11:06 | |
| 27 | Setting Up and Configuring Tables in shadcn-ui | 10:06 | |
| 28 | Custom Cells and Interactive Rows | 06:39 | |
| 29 | New Events Form | 22:54 | |
| 30 | Pagination and Sorting | 07:46 | |
| 31 | Mobile View | 04:08 | |
| 32 | What is component composition | 04:21 | |
| 33 | Building a Filter Component with shadcn-ui | 18:53 | |
| 34 | shadcn-ui source code architecture | 08:01 | |
| 35 | Setup shadcn-ui Development Environment | 03:25 | |
| 36 | Contributing to Shadcn UI | 16:36 |
Unlock unlimited learning
Get instant access to all 35 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Testing Next.js Apps with Jest, Testing Library and Cypress
Sources: udemy
Learn to test a real-world serverless React app with routes, authentication, database and more! Learn how to test your Next.js app from top to bottom! Tests pro
7 hours 35 minutes 24 seconds
Real-Time Collaborative Apps with Next.js and Supabase
Sources: fullstack.io
This course is here to assist you in efficiently creating real-time applications using Next.js, TypeScript, Tailwind CSS, and Supabase. We go beyond the fundame
51 minutes 59 seconds
Duolingo Clone
Sources: Code With Antonio
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language
11 hours 12 minutes 32 seconds
Build A Slack Clone
Sources: Code With Antonio
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.
15 hours 13 minutes 30 seconds
Build and Deploy a SaaS AI Agent Platform
Sources: Code With Antonio
In this video course, you will create a video call application with AI support from scratch. You will learn how to set up real-time video communication...
13 hours 24 minutes 14 seconds