Skip to main content

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

Building a Full-stack Multilingual Blog with Next.js 13.4

Building a Full-stack Multilingual Blog with Next.js 13.4

Sources: udemy
Are you looking to build a modern, full-stack blog with the latest technologies? Look no further than this comprehensive Udemy course, which will guide you thro
9 hours 15 minutes 4 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.

Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds
Zero To Shipped. The ultimate Next.js template

Zero To Shipped. The ultimate Next.js template

Sources: Kitze
Zero To Shipped is a powerful Next.js template designed to accelerate the full cycle of web application development. It offers a ready-made infrastructure with.
Duolingo Clone

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