Introduction

Overview of the course agenda and what to expect from the course.

About the Course

Understanding the core principles of shadcn/ui and how it fits into your toolbox.

The shadcn/ui way

Learning about the projects you will build in this course.

shadcn/ui Course Projects

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.

Module 2 Introduction

Create a new project using the shadcn/ui next-template

How to create a new shadcn/ui project

Learn about the project structure of the shadcn/ui next-template and how it's organized.

Exploring the shadcn/ui next-template Project Structure

Learn about the shadcn/ui CLI tool and how to use it to automate tasks.

shadcn/ui Command Line (CLI) Tool

Summary

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

Installation & Getting Started

Create a news site named NEWSLY using shadcn/ui and Next.js

Introduction to the News Site project

Learn about how typography works in shadcn/ui and how it differs from regular shadcn/ui components.

Typography in shadcn/ui

Create the layout for NEWSLY, a shadcn/ui news site

Building a News Site - Layout

Create the page navigation for NEWSLY, a shadcn/ui news site

Building a News Site - Navigation

Fetch and render articles from the newsapi.org API

Building a News Site - Fetching Articles

Create the home page for NEWSLY, a shadcn/ui news site

Building a News Site - Home Page

Create the category page for NEWSLY, a shadcn/ui news site

Building a News Site - Category Page

Create the article preview for NEWSLY, a shadcn/ui news site

Building a News Site - Article Preview

Change the typography aspects of the news site you just built

Building a News Site - Exercise

Building a News Site - Wrapping Up

Learn how to build a news site using shadcn/ui and Next.js

Building a News Site

Module 4 Introduction

Learn about shadcn/ui dark mode and how to add one to NEWSLY

shadcn/ui Dark Mode

Theming in shadcn/ui

Learn what shadcn/ui styles are, how they work, and how to use them

Shadcn/ui Styles

Animations in shadcn/ui

Create a new style for shadcn/ui components

Module Exercise - Creating a New Style

Module Summary

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

Theming & Customization

Learn how to build an event management application using shadcn/ui

Building an Event Management Application with shadcn/ui

Create the layout and header of the new events application

Layout And Header

Create the events list timeline page for the event management application

Event Page

Making the event list interactive by opening the event details sheet when the user clicks on an event

The Event Sheet

Create a new variant for the Card component in shadcn/ui

Create a Card Variant in shadcn/ui

Learn how to build an event management app using shadcn/ui and Next.js

Building Event Management App

Forms in shadcn/ui

Learn how to build the user context for the event management application using shadcn/ui

Building The User Context

Create the LoginButton component and conditionally render it inside the RSVPButton component

Building the Login Button

Create the AuthForm component to handle the login and register flow

Building the Authentication Form

Add a logout function to the UserContext and a logged-in state to the LoginButton

Finish the Authentication Flow

Learn how to add RSVP functionality to the event details page

RSVP Functionality

Module 6 Summary

Learn how to build shadcn/ui forms for authentication flows and event registrations

Building Forms

Learn about building tables with shadcn/ui

Module 7 Introduction

Building a powerful table to display a list of events that users have registered for.

Setting Up and Configuring Tables in shadcn/ui

Customize the cells and rows of the table and open a sheet showing the event details when the user clicks on the title.

Custom Cells and Interactive Rows

Create a form to allow users to create new events and display them in a table.

New Events Form

Add pagination and sorting to the EventsTable component

Pagination and Sorting

Make the website responsive and adapt the table for mobile devices

Mobile View

Module 7 Summary

Learn how to build powerful tables in shadcn/ui with features like sorting, filtering, and pagination

Building Powerful Tables

Learn how to compose components to build new ones

Module 8 Introduction

Learn about component composition and its benefits in shadcn/ui

What is component composition?

Learn how to compose multiple components to create a new one, such as building a filter component.

Building a Filter Component with shadcn/ui

Module 8 Summary

Learn how to compose new components in shadcn/ui and build a new Filter component

Composing New Components

Learn how to contribute to the shadcn/ui codebase

Module 9 Introduction

Learn about the shadcn/ui library architecture and how it is built and structured

shadcn/ui source code architecture

Learn how to setup the shadcn/ui local development environment

Setup shadcn/ui Development Environment

Contributing to Shadcn UI

Find and contribute back to the shadcn/ui library

Exercise - Contribute to shadcn/ui

Module 9 Summary

Learn how to contribute to the shadcn/ui project and build your own components

Contributing to the shadcn/ui Project

Course Conclusion

Summary of the Building Sleek and Modern Web Applications with shadcn/ui Course

Wrapping Up

shadcn/ui

## Building Modern and Accessible UI's is a Tedious Task

When you need to build modern and accessible UI for a web application, you basically have two options:

- Use an already-styled UI library like Material UI, Chakra UI, or Ant Design.
- Build your UI library from scratch.

But both options have their drawbacks.

The first approach limits you to the UI library author's decisions.
Many UI component libraries fall short when it comes to modularity, customizability, and accessibility. 
They can be bloated, impossible to customize, and spoiled with excess dependencies, which complicates the development process.

In the second approach, you have complete control over the design and functionality of the UI library, **but it's so much work to build and maintain a UI library.**
**Without a full team of engineers and designers to create and maintain dozens or hundreds of components it's almost impossible.**

You end up with a front-end application that is hard to maintain, and you spend more time on the UI than on the actual application logic.
Your application's UI is not accessible by default, and you need to spend extra time to make it accessible.

Your designers are not happy because they can't iterate quickly on the design, and your developers are not happy because they can't build new features quickly.

## How shadcn/ui solves this

shadcn/ui offers a **third approach**.
It is a collection of **beautifully designed**, **accessible**, and **customizable** components that you can copy and paste into your project source code.

shadcn/ui is built on top of two core principles:

- **You own and control your UI library code**
- **The component's Design and Behavior are separated and customizable**

This differs from other component libraries, which you install as npm packages, **and it gives you complete control over the components.**

Thanks to shadcn/ui, you can **quickly build modern and accessible UI's** for your web applications, **without the need to build and maintain a UI library from scratch.**  
You are free to build the UI you want while **spending more time on the application logic and features, rather than customizing the UI libraries you've choosen to use.**
Easily build new components by composing existing ones.

shadcn/ui is one of the hottest open-source projects out there. It won the JavaScript Rising Stars award for last year, and it's been adopted by companies like Vercel.

With shadcn/ui, you can build any UI you want in a fraction of the time it would take to build a UI library from scratch.


### Course Content Overview

Total Modules: **10**
Total Lessons: **56**

Build Modern User Interfaces with Radix UI and Tailwind CSS

Gain confidence building modern web UIs with a deep dive into the essentials of shadcn/ui, TailwindCSS, and Radix UI. Learn how to craft flexible, modular UIs and integrate these skills into Next.js projects. Put yourself at the forefront of front-end innovation.

By the end of the course, you'll master shadcn/ui, understanding the theory behind it, building two production-ready web applications, and learning how to contribute back to the library.

Sleek Next.JS Applications with shadcn/ui

Why shadcn/ui became so popular and how it's **changing the UI development landscape**

What problems shadcn/ui solves, and what are the core concepts behind it

How shadcn/ui uses TailwindCSS and Radix UI to create a collection of beautiful and accessible components

What are shadcn/ui themes, styles, and how you can customize them to fit your needs

How to build powerful **Layouts**, **Tables**, **Data Grids**, and **Forms** with shadcn/ui

How you can integrate shadcn/ui with real-world **Next.js** applications to build **modern front-end applications**

How to customize shadcn/ui built-in animations

What is **Component Composition** and how to compose new components from existing shadcn/ui components

How to build a special **Filter** component from shadcn/ui

How to **contribute to shadcn/ui** and give back to the open-source community

The course covers the following main topics:

Follow the lessons in order, as the course is designed to build on the knowledge you acquire in the previous lessons.

If you're a beginner, aim to complete around two modules per week. Some modules are shorter and cover more theoretical concepts, while others, like the Building a News Site and Building an Event Management App modules, are longer and cover more practical projects.

 for a while, I've seen how it has changed the way developers build web applications.

---
title: About the Course
description: Overview of the course agenda and what to expect from the course.
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/eE1w42xwiSVZb01W00kd00nmz01r2y938Oebjf3Os3Eqz008.m3u8
---

## The Course Agenda

The course covers the following main topics:

-   **Core Concepts**: You'll understand `shadcn/ui` fundamentals, building blocks, and the reasons behind its popularity.
-   **Installation & Setup**: You'll learn how to add and use `shadcn/ui` in your project.
-   **Practical Projects**: You'll learn to build web applications using `shadcn/ui` by constructing two real-world applications.
-   **Complex Usage**: You'll build powerful Forms, Tables, and compose new components with `shadcn/ui`.

The modules that cover these topics are:

1.  Introduction (you are here)
2.  [Installation & Getting Started](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/module-2-introduction)
3.  [Building a News Site](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/introduction-to-the-news-site-project)
4.  [Theming & Customization](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/module-4-introduction)
5.  [Building an Event Management App](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/building-an-event-management-application-with-shadcnui)
6.  [Building Forms](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/forms-in-shadcnui)
7.  [Building Powerful Tables](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/module-7-introduction)
8.  [Composing New Components](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/module-8-introduction)
9.  [Contributing to the `shadcn/ui` Project](https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui/module-9-introduction)

Follow the lessons in order, as the course is designed to build on the knowledge you acquire in the previous lessons.

Eyal Cohen

The course covers the following main topics.

You will understand Shatsy and UI fundamentals, building blocks, and the

Installation and setup, you will learn how to add and use Shatsy and UI in your

While projects, you will learn how to build web applications using Shatsy and

two real world applications and complex usage.

You will build powerful forms, tables, and you will compose new components with

The modules that cover these topics are the introduction, installation and get

building a new site, theming and customization, building an event management

forms, building powerful tables, composing new components, and how to

I encourage you to follow the lessons in order, as the course is designed to

knowledge you acquired in the previous lessons.

If you are a beginner, aim to complete around two modules per week.

Some modules are shorter and cover multi-urorical concepts, while other like

use site and building an event management app modules are longer and cover more

Having worked with Shatsy and UI for a while, I've seen how it has changed the

I have also noticed how it has helped many developers build better and more

This course aims to help you learn Shatsy and UI in a practical way by building

It's designed to help you to understand the core concepts behind Shatsy and UI,

design, accessibility, and an amazing developer experience.

The goal is to make more developers aware of the new paradigm Shatsy and UI

to UI and component development to help them build better applications faster.

The aim is to help you become a more effective developer, and I believe the Sh

Enroll to Discurs if you want to understand the core concepts behind Shatsy and

part of a community of like-minded developers learning together, if you want to

to contribute to open source projects like Shatsy and UI, and also adding a new

to your resume, you can also add two new projects to your portfolio.

You will also learn how to build real world applications with Shatsy and UI,

radics, and tail-width, and how to be able to compose a new complex component

In Discurs you will gain a deep understanding of Shatsy and UI in its ecosystem

You will actively build projects, applying what you are learning real world

This hands-on approach ensures that you not only understand the theory, but can

You will start with the fundamentals and gradually move to more complex topics.

You will learn the basic concepts, installation, and setup, while diving deep

You will join a community of like-minded learners and professionals.

Discurs is not just about learning Shatsy and UI, but it's becoming a part of a

that supports growth and opportunities to un-course Discord channel.

In the next lesson, you will learn more about the Shatsy and UI way.