CF

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

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling, you should have a basic understanding of web development concepts and experience with JavaScript. Familiarity with React and Next.js will be beneficial, as the course involves building applications using these frameworks. Additionally, knowledge of CSS, particularly TailwindCSS, will be helpful since the course covers topics like theming and dark mode using TailwindCSS.
What projects will I build during the course?
Throughout the course, you will build two fully functional applications that are ready for production use. One of the projects involves creating a news site, where you will design the layout, navigation, and implement features like fetching articles, building home and category pages, and article preview. The second project focuses on an event management system, including components like event pages, user authentication, RSVP functionality, and more.
Who is the target audience for this course?
This course is targeted at frontend developers who wish to enhance their skills in modern web development using cutting-edge technologies. It is particularly suited for those interested in mastering shadcn/ui, TailwindCSS, and Radix UI, and who aim to integrate these tools into Next.js projects. It is also ideal for developers looking to contribute to open-source projects like shadcn-ui.
How does this course compare in depth and scope to other web development courses?
The course offers a specialized focus on shadcn/ui, TailwindCSS, and Radix UI, providing a unique opportunity to master these tools within the context of Next.js applications. Unlike general web development courses, this course includes the development of two production-ready applications and covers advanced topics such as theming, animations, and component composition, making it suitable for those looking to deepen their frontend skills.
What specific tools and platforms will I learn to use in this course?
You will learn to use shadcn/ui, a library for building modern web interfaces, alongside TailwindCSS for styling and Radix UI for component primitives. The course also covers the shadcn-ui Command Line (CLI) tool for project setup and management. Furthermore, you will work extensively with Next.js to integrate these technologies into complete web applications.
What topics are not covered in this course?
The course does not cover backend development or server-side technologies beyond what is necessary for setting up Next.js projects. It focuses primarily on frontend development and does not delve into database management, server configuration, or backend frameworks. Additionally, it does not cover non-JavaScript frameworks or libraries.
How much time should I expect to commit to this course?
With 36 lessons in total, the course is designed to be thorough and immersive. While the runtime of the lessons is not specified, you should expect to spend additional time practicing the concepts taught, especially when building the two projects. Depending on your prior experience, you might need to allocate extra time for exercises and understanding advanced topics like component composition and shadcn-ui architecture.