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
On demand video

5 hrs 10 mins

Video Lessons

36 Videos

Course Instructor
Avatar Image

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.

How The Course Works

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.

Course Overview

Build Modern User Interfaces with Radix UI and Tailwind CSS

What You Will Learn

  • 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

newline Pro Subscription

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn more about newline Pro

$18/MO

Join Now

Billed annually or $40/mo billed monthly. Free to cancel anytime.

One-Time Purchase for $79 -

Get Reimbursed by Your Employer

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg
sample bg image url

Sample Course Lessons

Course Syllabus and Content

Module 1

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.

Module 2

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 3

Building a News Site

10 Lessons1 Hours 6 Minutes

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

Module 4

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

Module 5

Building Event Management App

5 Lessons 51 Minutes

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

Module 6

Building Forms

7 Lessons 47 Minutes

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

Module 7

Building Powerful Tables

7 Lessons 51 Minutes

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

Module 8

Composing New Components

4 Lessons 23 Minutes

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

Module 9

Contributing to the shadcn/ui Project

6 Lessons 28 Minutes

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

Module 10

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

        Eyal Cohen

        Eyal Cohen

        πŸ‘‹ Hi! I'm Eyal, Founder of Hooks, a software development company. I have developed complex and millions-scale UI's for dozens of companies, and shadcn/ui made my life so easy since it's release. Using shadcn/ui, I was able to ship features faster, make my applications accessible by default, with beautiful UI's and amazing developer experience. I'm excited to show you how to do the same.

        Purchase the course today

        One-Time Purchase

        Sleek Next.JS Applications with shadcn/ui

        $79
        Sleek Next.JS Applications with shadcn/ui
        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee
        • Lifetime Access

        newline Pro Subscription

        $18/MO

        Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

        Sleek Next.JS Applications with shadcn/ui

        Billed annually or $40/mo billed monthly. Free to cancel anytime.

        • Discord Community Access
        • Full Transcripts
        • Money Back 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 πŸ†
        Join Now

        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.

        Newline Image

        Sleek Next.JS Applications with shadcn/ui

        $79