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

Nest.js Microservices: Build & Deploy a Scaleable Backend

Nest.js Microservices: Build & Deploy a Scaleable Backend

Sources: udemy
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul
5 hours 39 minutes 49 seconds
Build Viral Telegram Apps Course

Build Viral Telegram Apps Course

Sources: Nikandr Surkov
Learn to develop Telegram Mini Apps from scratch to completion: game mechanics, payment integration (TON and Telegram Stars), built-in viral elements...
37 minutes 59 seconds
Build an LMS Platform

Build an LMS Platform

Sources: Code With Antonio
In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch. We will use modern technologies...
10 hours 41 minutes 23 seconds
Full Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)

Full Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)

Sources: Michael Guay
Find out how to set up authentication with Clerk in 20 minutes in a Next.js and NestJS application. A simple and secure integration for your project.
18 minutes 9 seconds