CourseFlix

Sleek Next.JS Applications with shadcn/ui

5h 10m 20s
English
Paid

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.

About the Author: Fullstack.io

Fullstack.io thumbnail

Fullstack.io is the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.

The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.

The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.

Watch Online 36 lessons

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

Course content

36 lessons · 5h 10m 20s
Show all 36 lessons
  1. 1 Introduction 01:32
  2. 2 About the Course 03:40
  3. 3 The shadcn-ui way 01:30
  4. 4 How to create a new shadcn-ui project 02:17
  5. 5 Exploring the shadcn-ui next-template Project Structure 06:16
  6. 6 shadcn-ui Command Line (CLI) Tool 05:11
  7. 7 Typography in shadcn-ui 04:02
  8. 8 Building a News Site - Layout 05:30
  9. 9 Building a News Site - Navigation 11:55
  10. 10 Building a News Site - Fetching Articles 05:57
  11. 11 1Building a News Site - Home Page 22:20
  12. 12 Building a News Site - Category Page 11:21
  13. 13 Building a News Site - Article Preview 05:57
  14. 14 shadcn-ui Dark Mode 04:34
  15. 15 Theming in shadcn-ui 08:14
  16. 16 Shadcn-ui Styles 03:12
  17. 17 Animations in shadcn-ui 05:03
  18. 18 Layout And Header 10:52
  19. 19 Event Page 21:23
  20. 20 The Event Sheet 14:09
  21. 21 Create a Card Variant in shadcn-ui 04:43
  22. 22 Building The User Context 11:16
  23. 23 Building the Login Button 04:45
  24. 24 Building the Authentication Form 14:35
  25. 25 Finish the Authentication Flow 06:11
  26. 26 RSVP Functionality 11:06
  27. 27 Setting Up and Configuring Tables in shadcn-ui 10:06
  28. 28 Custom Cells and Interactive Rows 06:39
  29. 29 New Events Form 22:54
  30. 30 Pagination and Sorting 07:46
  31. 31 Mobile View 04:08
  32. 32 What is component composition 04:21
  33. 33 Building a Filter Component with shadcn-ui 18:53
  34. 34 shadcn-ui source code architecture 08:01
  35. 35 Setup shadcn-ui Development Environment 03:25
  36. 36 Contributing to Shadcn UI 16:36

Related courses

  • The Road to Next thumbnail

    The Road to Next

    By: Robin Wieruch
    As a full-stack developer, you have numerous opportunities. Whether it's launching a successful startup, building a career in a corporate company, or.
    30 hours 40 minutes 42 seconds 5 / 5
  • CodeFast | Learn to code in weeks, not months. thumbnail

    CodeFast | Learn to code in weeks, not months.

    By: Marc Lou
    CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively.
    11 hours 38 minutes 42 seconds 4 / 5
  • Build a Youtube Clone thumbnail

    Build a Youtube Clone

    By: Antonio Erdeljac (Code With Antonio)
    In this course, you build a full YouTube‑style app from scratch. You use Next.js 15 , React 19 , and tRPC to create a clear and fast stack.
    23 hours 42 minutes 10 seconds

Frequently asked questions

What is Sleek Next.JS Applications with shadcn/ui about?
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…
Who teaches Sleek Next.JS Applications with shadcn/ui?
Sleek Next.JS Applications with shadcn/ui is taught by Fullstack.io. You can find more courses by this instructor on the corresponding source page.
How long is Sleek Next.JS Applications with shadcn/ui?
Sleek Next.JS Applications with shadcn/ui contains 36 lessons with a total runtime of 5 hours 10 minutes. All lessons are available to watch online at your own pace.
Is Sleek Next.JS Applications with shadcn/ui free to watch?
Sleek Next.JS Applications with shadcn/ui is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Sleek Next.JS Applications with shadcn/ui online?
Sleek Next.JS Applications with shadcn/ui is available to watch online on CourseFlix at https://courseflix.net/course/sleek-next-js-applications-with-shadcn-ui. The page hosts every lesson with the integrated video player; no download is required.