shadcn/ui has a built-in command-line tool (CLI) to automate some tasks.

The init command is responsible for initializing shadcn/ui inside an existing project.

Running the command will present a list of questions. The CLI will add shadcn/ui to the project based on the responses.

- Would you like to use TypeScript (recommended)? no/yes
- Which style would you like to use? › Default
- Which color would you like to use as the base color? › Slate
- Where is your global CSS file? › › app/globals.css
- Do you want to use CSS variables for colors? › no/yes
- Where is your tailwind.config.js located? › tailwind.config.js
- Configure the import alias for components: › @/components
- Configure the import alias for utils: › @/lib/utils
- Are you using React Server Components? › no/yes
- Write configuration to components.json. Proceed? › Y

You can fill it out based on your preferences.

The command will add to your project the following pieces:

The next lesson will explore a next-template to create a new project with all these includes without running the command.

As you learned in the first module, shadcn/ui components are hosted in a registry.
The add command is responsible for installing a component from the registry to the project.
You can also go ahead and copy-paste the components manually if you want, but it takes a bit more time than running the command.

---
title: shadcn/ui Command Line (CLI) Tool
description: Learn about the shadcn/ui CLI tool and how to use it to automate tasks.
privateVideoUrl: https://stream.mux.com/UcUT3pDBMTlSlqkIGqTks02IKWWmRi59A4J1FLJZZHYY.m3u8
---

shadcn/ui has a built-in command-line tool (CLI) to automate some tasks.

The available commands are:

1.  `init`: Initializes shadcn/ui in an existing project.
2.  `add <component>`: Installs a shadcn/ui component to a project.
3.  `diff`: Checks for updates against the component registry.

The easiest way to run the CLI is via `npx`:

```bash
npx shadcn-ui@latest add navigation-menu
```

### Init

The init command is responsible for initializing shadcn/ui inside an existing project.

You can do this by running:

```bash
npx shadcn-ui@latest init
```

Running the command will present a list of questions. The CLI will add shadcn/ui to the project based on the responses.

```bash lines
- Would you like to use TypeScript (recommended)? no/yes
- Which style would you like to use? › Default
- Which color would you like to use as the base color? › Slate
- Where is your global CSS file? › › app/globals.css
- Do you want to use CSS variables for colors? › no/yes
- Where is your tailwind.config.js located? › tailwind.config.js
- Configure the import alias for components: › @/components
- Configure the import alias for utils: › @/lib/utils
- Are you using React Server Components? › no/yes
- Write configuration to components.json. Proceed? › Y
```

You can fill it out based on your preferences.

The command will add to your project the following pieces:

-   Required dependencies, such as `@radix-ui/react`, `next-themes`, `tailwindcss`, and `lucide-icons`.
-   Configuration files for `tailwindcss` and `shadcn/ui`
-   The `cn` util
-   Required `CSS` variables

The next lesson will explore a next-template to create a new project with all these includes without running the command.

### Add

As you learned in the first module, shadcn/ui components are hosted in a registry.
The add command is responsible for installing a component from the registry to the project.
You can also go ahead and copy-paste the components manually if you want, but it takes a bit more time than running the command.

Eyal Cohen

Learn about the shadcn/ui CLI tool and how to use it to automate tasks.

shadcn/ui Command Line (CLI) Tool

In this lesson, you will learn about the shadcn/ui Commanding Tool.

shadcn/ui has a built-in Command-led tool, CLI, to automate some tasks.

The available commands are init, add and diff, init initializes shadcn/ui in an existing project. The add component installs shadcn/ui component to an

The add component installs shadcn/ui component to a project,

and the diff command checks for updates against the component registry.

The easiest way to run the CLI is with NPX.

If you have npm installed, you should download the event peaks,

Call NPX, shadcn/ui@latest, add navigation menu,

it's a component from shadcn/ui that we are going to use in this project.

The add command is responsible for installing a component from the registry to

You can also go ahead and copy paste the components manually from the docs if

but it takes a bit more time than running the command.

The command is also responsible for installing any dependencies and the

After the command finishes, you should see a new file under the UI folder.

npx shadcn/ui@latest add card, now you should see that being

Go back to the UI folder, click on the card, and here is the card source code.

Now to validate the installation finish successfully, let's go to app/page.t6

and change everything inside into a card, remove everything that you see,

change the classname here to ‘mx-auto’, ‘mt-8’ nad ‘max-w-xl‘.

And then let's validate it, run npm run dev in your favorite terminal,

and then open "cut", and then open the local URL in your browser.

If everything was successful, you should see this page and a low world card

The div command allows viewing a list of the current project installed

Let’s run the following command ‘npx shadcn-ui@latest‘ diff

The output should look something like the following.

the output should look something like the following.

The following components have updates available,

We can call the "diff" command with the component to see the actual changes.

Here we can now see the difference between the registry run and the one that we

We can update it if you want with the "add" command.

The "init" command is responsible for initializing shadcn/ui inside an

You can run it with the ‘npx shadcn-ui@latest init’

I've created a new "new" next application in my terminal.

Then I'm running the "chatcnui" at latest in its command.

Running the command will present a list of questions.

The CLI will add "chatcnui" to the project based on the responses.

and it will install the required dependencies like "radixui" next themes and

It will create the configuration files for tailwind CSS and "chatcnui".

It will add a "cnutil" inside "lib/utils" like we have in the template,

and the required CSS variables in the "global.css" file.

The "init" command creates a "component.json" file,

and it is the "defacto" "chatcnui" configuration file.

Under the hood, `shadcn/ui` uses the file to determine the project setup based

As "chatcnui" uses, it can be used to configure and tweak the library behavior.

It probably won't need to be changed very often,

but in case, it also has some properties that you can control using the "

The "style" property, which is the "component" style, either default or New

we are going to learn more about it in the "first" module.

The "tailwind", which is the configuration related to tailwind, the "config"

The "tsx", which is whether to use the "typescript" component and "rsc" -

There are all your "cat", there are also aliases defined.

In this lesson, you've learned about the "shadcn/ui" command line tool.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript