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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 36 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction

All Course Lessons (36)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Next.js Ecommerce

Next.js Ecommerce

Sources: Brad Traversy
The Next.js Ecommerce course is an extensive 22-hour program that teaches you step by step how to create a full-fledged e-commerce platform with...
22 hours 12 minutes 23 seconds
Next JS: The Complete Developer's Guide

Next JS: The Complete Developer's Guide

Sources: udemy, Stephen Grider
Congratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, fe
15 hours 35 minutes 12 seconds
Magic UI Pro

Magic UI Pro

Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
Build a Youtube Clone

Build a Youtube Clone

Sources: Code With Antonio
In this 24-hour course, you will learn how to create your own YouTube clone using modern technologies. We will go into detail on advanced topics, including...
23 hours 42 minutes 10 seconds
Build and Deploy a B2B SaaS AI Support Platform

Build and Deploy a B2B SaaS AI Support Platform

Sources: Code With Antonio
In this course, we will build a customer support platform powered by AI from scratch: we will set up a live chat using Convex Agents, add voice support through.
22 hours 20 minutes 55 seconds