Setup shadcn/ui Development Environment

Learn how to setup the shadcn/ui local development environment

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:15] In this lesson, you will learn how to set up ShadCNUI local development environment. Large open source projects usually have ever contributing guides outlining the contributing standards, including coding practices and commit convention.

    [00:16 - 00:29] The ShadCNUI contributing guide starts with the project architecture, which you 've learned about in the previous lesson. The guide covers how to set up the development environment, including the tools you need to install and run the project locally.

    [00:30 - 00:43] Let's see the guide. It tells us about the repository, what is the structure, which you've learned about in the previous model, and it tells you how to develop for the library, and what is the commit conventions.

    [00:44 - 01:11] The first step would be to fork the ShadCNUI repository to your GitHub account, go to the ShadCNUI repository, hosted in GitHub.com/shadCN/UI, and then click on the fork button in the top right corner of the page, and click on create fork. GitHub will create a fork of the ShadCNUI repository in your GitHub account.

    [01:12 - 01:15] Now you need to clone the repository to your machine. This is the second step.

    [01:16 - 01:34] Turn the terminal and change the current wording directory to the location where you want the clone directory. From it/dev, and then type git clone and paste the URL that you've copied earlier.

    [01:35 - 01:41] From it/sealcoin4. And then click on OK.

    [01:42 - 01:58] Then navigate to the project directory, and install all the dependencies. ShadCNUI uses PNPM as a packet manager, and you can install it by running NPM install PNPM.

    [01:59 - 02:00] And that's it. Now you can run the project.

    [02:01 - 02:09] Let's run PNPM. Dash-filter = www.dev.

    [02:10 - 02:17] And open the URL that is being printed to the terminal. You should now see the documentation website running on your computer.

    [02:18 - 02:30] Now let's verify the setup. Open your favorite code editor with the project and navigate to dialogdemo.tsx.

    [02:31 - 02:38] Make sure it's in the default style. Then change the edit profile to edit your profile.

    [02:39 - 02:48] Look at the edit profile, and button, and change it to edit your profile. Make sure you're on the default style again.

    [02:49 - 02:54] And now go back to the browser. Go to the dialog.

    [02:55 - 02:59] Documentation. And you can see that it's edit your profile.

    [03:00 - 03:04] Go back to your code base. Change it back to edit your profile.

    [03:05 - 03:45] And see how it's changed. Teach you how to identify contributing opportunity and make changes to your folk.