Welcome to
Sleek Next.JS Applications with shadcn/ui
Build Modern User Interfaces with Radix UI and Tailwind CSS
Course Syllabus and Content
Introduction
4 Lessons 6 Minutes
Welcome to the course! In this module, you'll learn about the building blocks of shadcn/ui, the core principles behind it, how's this course works, and reason we decided to make it. You'll gain deep knowledge on the core concepts behind shadcn/ui to prepare you for the rest of the course.
An introduction to the course
Overview of the course agenda and what to expect from the course.
Understanding the core principles of shadcn/ui and how it fits into your toolbox.
Learning about the projects you will build in this course.
Installation & Getting Started
5 Lessons 13 Minutes
Learn how to install shadcn/ui in an existing project, how to use the shadcn/ui CLI, and how to start a new shadcn/ui project
Module 2 Introduction
Create a new project using the shadcn/ui next-template
Learn about the project structure of the shadcn/ui next-template and how it's organized.
Learn about the shadcn/ui CLI tool and how to use it to automate tasks.
Module 2 Summary
Building a News Site
10 Lessons1 Hours 6 Minutes
Learn how to build a news site using shadcn/ui and Next.js
Create a news site named NEWSLY using shadcn/ui and Next.js
Learn about how typography works in shadcn/ui and how it differs from regular shadcn/ui components.
Create the layout for NEWSLY, a shadcn/ui news site
Create the page navigation for NEWSLY, a shadcn/ui news site
Fetch and render articles from the newsapi.org API
Create the home page for NEWSLY, a shadcn/ui news site
Create the category page for NEWSLY, a shadcn/ui news site
Create the article preview for NEWSLY, a shadcn/ui news site
Change the typography aspects of the news site you just built
Module 3 Summary
Theming & Customization
7 Lessons 21 Minutes
Learn how to customize the look and feel of your shadcn/ui components, how to create your own themes, how to use shadcn/ui styles, and how to customize shadcn/ui animations
Learn about shadcn/ui themes and styles
Learn about shadcn/ui dark mode and how to add one to NEWSLY
Learn about shadcn/ui themes and styles
Learn what shadcn/ui styles are, how they work, and how to use them
Learn how to use animations in shadcn/ui
Create a new style for shadcn/ui components
Module 4 Summary
Building Event Management App
5 Lessons 51 Minutes
Learn how to build an event management app using shadcn/ui and Next.js
Learn how to build an event management application using shadcn/ui
Create the layout and header of the new events application
Create the events list timeline page for the event management application
Making the event list interactive by opening the event details sheet when the user clicks on an event
Create a new variant for the Card component in shadcn/ui
Building Forms
7 Lessons 47 Minutes
Learn how to build shadcn/ui forms for authentication flows and event registrations
Learn how to build an event management application using shadcn/ui
Learn how to build the user context for the event management application using shadcn/ui
Create the LoginButton component and conditionally render it inside the RSVPButton component
Create the AuthForm component to handle the login and register flow
Add a logout function to the UserContext and a logged-in state to the LoginButton
Learn how to add RSVP functionality to the event details page
Module 6 Summary
Building Powerful Tables
7 Lessons 51 Minutes
Learn how to build powerful tables in shadcn/ui with features like sorting, filtering, and pagination
Learn about building tables with shadcn/ui
Building a powerful table to display a list of events that users have registered for.
Customize the cells and rows of the table and open a sheet showing the event details when the user clicks on the title.
Create a form to allow users to create new events and display them in a table.
Add pagination and sorting to the EventsTable component
Make the website responsive and adapt the table for mobile devices
Module 7 Summary
Composing New Components
4 Lessons 23 Minutes
Learn how to compose new components in shadcn/ui and build a new Filter component
Learn how to compose components to build new ones
Learn about component composition and its benefits in shadcn/ui
Learn how to compose multiple components to create a new one, such as building a filter component.
Module 8 Summary
Contributing to the shadcn/ui Project
6 Lessons 28 Minutes
Learn how to contribute to the shadcn/ui project and build your own components
Learn how to contribute to the shadcn/ui codebase
Learn about the shadcn/ui library architecture and how it is built and structured
Learn how to setup the shadcn/ui local development environment
Learn how to contribute to the shadcn/ui codebase
Find and contribute back to the shadcn/ui library
Module 9 Summary
Wrapping Up
1 Lesson
Summary of the Building Sleek and Modern Web Applications with shadcn/ui Course