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

A good learning task will be to try and create your own styles, shared between multiple components.

Create a new project from the shadcn/ui template:

---
title: Module Exercise - Creating a New Style
description: Create a new style for shadcn/ui components
---

In this module, you have learned about `shadcn/ui` styles. `shadcn/ui` will offer more styles in the future.

## The Exercise

A good learning task will be to try and create your own styles, shared between multiple components.

Create a new project from the shadcn/ui template:

```bash
npx create-next-app -e https://github.com/shadcn/next-template shadcn-styles
```