How to create a new shadcn/ui project

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

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Sleek Next.JS Applications with shadcn/ui course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Sleek Next.JS Applications with shadcn/ui, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Sleek Next.JS Applications with shadcn/ui

  • [00:00 - 00:09] In this lesson, you will learn how to create a new "Shad-Cnui" project. "Shad-Cnui" is a great GitHub template that allows using for a new project.

    [00:10 - 00:19] It really helps speed up the boilerplate and scaffolding phases for a new project. This and the next lesson will be focused on creating new projects using the template.

    [00:20 - 00:36] It includes the following feature. The next JS13 app directory, Radix UI primitives, Tailwind CSS, icons from Luc idet, Dark mode with next themes, and Tailwind CSS class sorting, merging and linking functionality.

    [00:37 - 00:42] You will use it to create the first application of the course and use website. You will call it "Newsly".

    [00:43 - 00:55] Open your favorite terminal and run the following command. "NPEs create next app -e" with the "next template" link.

    [00:56 - 01:18] Then call it "Newsly". Run the following command.

    [01:19 - 01:43] Run the project and see the result "cdnewzly" Open "localhost3000" in your browser. You should see the following either on "downcall" or "light mode".

    [01:44 - 01:49] Change the "site" title to confirm you are in the right place. Open the project in your favorite code editor.

    [01:50 - 01:57] I use "viskold" personally. And then open the config/site.ts file.

    [01:58 - 02:07] Find the name property, which is right now next JS, and change it to "Newsly". You should see the title changed in your browser.

    [02:08 - 02:14] You have now successfully created a new project and have changed its title. In the next lesson you will explore the project structure.