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

Shopify + Next.js + Tailwind CSS: Modern Ecommerce

Shopify + Next.js + Tailwind CSS: Modern Ecommerce

Sources: workingwithshopify.com
Learn how to build blazing fast online storefronts used by the top brands today. Get a quick start with the latest tech stack that is in demand with the top bra
5 hours 7 minutes 23 seconds
Build a Microservices app with .Net and NextJS from scratch

Build a Microservices app with .Net and NextJS from scratch

Sources: udemy
Microservices is the latest 'buzzword' and hot topic in the web development industry at the moment and nowadays having microservices as part of your skillset is becoming more an...
31 hours 42 minutes 57 seconds
Next.js & React with ChatGPT - Development Guide (2023)

Next.js & React with ChatGPT - Development Guide (2023)

Sources: udemy
Throughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating Ope
7 hours 6 minutes 49 seconds
NestJS + Next.js: Event Driven Architecture

NestJS + Next.js: Event Driven Architecture

Sources: Michael Guay
Learn how to create an event-driven architecture with NestJS and Next.js. The course covers EventEmitter and SSE for developing real-time systems.
45 minutes 9 seconds