Sleek Next.JS Applications with shadcn/ui
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.
- 4.7 / 5 (3 ratings)
- Published
- Updated
5 hrs 10 mins
36 Videos
Eyal Cohen
Hi! I'm Eyal, Founder of Hooks, a software development service. Since 2016, I've been developing software products for various companies. I also co-founded Desert Lion, a startup focused on time travel debugging. Previously, I published a beginner's guide to React Native, and currently, I'm teaching the capabilities of shadcn/ui.
The course is divided into 10 modules, each with a few lessons.
The course combines:
- Theory Modules: A deep dive into shadcn/ui core principles, the technologies behind it, and how to start use it.
- Practical Modules: Building two real-world application, learning how to contribute to shadcn/ui, and composing new components togehter.
- Code Along: During the practical modules, you'll code along with Eyal, building the applications together.
The course is designed to make you an efficient developer, and to help you build real-world production-ready web applications for your portfolio.
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with Sleek Next.JS Applications with shadcn/ui. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
Build Modern User Interfaces with Radix UI and Tailwind CSS
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
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
Our students work at
Sample Course Lessons
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
Subscribe for a Free Lesson
By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.
What Students are Saying
Meet the Course Instructor
Purchase the course today
One-Time Purchase
Sleek Next.JS Applications with shadcn/ui
- Discord Community Access
- Full Transcripts
- Project Completion Guarantee
- Lifetime Access
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $40/mo billed monthly. Free to cancel anytime.
- Discord Community Access
- Full Transcripts
- Project Completion Guarantee
- Lifetime Access
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Frequently Asked Questions
What is Building Sleek Web Applications with shadcn/ui?
Building Sleek Web Applications with shadcn/ui is how to make UI development easy again.
It's your way to master the most modern front-end technologies and build beautiful, accessible, and modular UI's for your web applications.
In the course, you'll learn the theories behind the new hottest open-source project, shadcn/ui, and how to build two real-world applications with it.
You'll learn how to contribute back to the shadcn/ui community, and how to customize the look and feel of the components to fit your needs.
The content inside is designed to make you an efficient developer, and to help you build real-world production-ready web applications for your portfolio.
Who is this course for?
This course is for you if you are **building UI's everyday** and if you love **learning the most modern front-end technologies**.
It's also for you if you spend a lot of time customizing current UI libraries.
If you waste your time making your components accessible.
If you have don't feel confident building new beautiful components from scratch,
If you are tried of adapting your UI to your designer colleagues requests.
If you understand that modern UI development is a craft, and it's not just about writing code.
It's about modularity, accessibility, and flexibilty.
If you answered "yes" to any of these questions, this course is for you.
What if I don't like the course?
We offer a 30-day money-back guarantee, so if you're not satisfied with the course, you can request a refund within 30 days of purchase by sending us a message.
What is included in the course?
This course include 10 video modules. You’ll have access to every lesson video, textual lesson content, downloadable project code files, interactive IDE, and AI Tutor.
What are there prerequisites for this course?
Basic HTML, CSS, and JavaScript are required, with the course benefiting most from prior experience in React, particularly its fundamentals like hooks, components, state, and props, alongside Next.js familiarity, though not obligatory, with a project utilizing the shadcn-ui Next.js template, while ensuring a functioning Node.js environment with Node.js 16 or later installed, and TypeScript knowledge is advantageous.
What will I learn?
Learn how to craft flexible, modular UIs with shadcn/ui, TailwindCSS, and Radix UI.
Why take this course?
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.
How will the course improve my confidence in shadcn/UI?
By the end of the course, you'll have learned how to craft flexible, modular UIs and integrate these skills into Next.js projects.
How long will it take to complete the course?
The course offers flexibility, allowing you to learn at your own pace. Start, stop, re-watch anytime. It’s expected that you’d spend approximately 4-6 hours going through the entire course materials.
Can I access the course on my mobile device?
Yes, the course is fully responsive and can be accessed on your mobile device.
Is there a certificate upon completion of the course?
Yes, you can get a certificate by sending us a message.
Can I download the course videos?
No, the course videos cannot be downloaded, but they can be accessed online at any time.
What is the price of the course?
The course is currently priced at $49 USD. Alternatively, you can access the complete course as part of the "newline Pro subscription", which costs $30/month.
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.
