CODEWITHSUNDEEP
shadcnui
adxxtya
adxxtya

Reputation: 879

ShadCN UI commands on terminal is not working

All of the sudden the commands for the shadcn ui library has stopped working.

I am getting the following on the terminal:

npx shadcn-ui@latest add button

sh: line 1: shadcn-ui: command not found

I tried:

but still doesn't work

Upvotes: 21

Views: 40364

Answers (5)

Geva-eval Inya Egbe
Geva-eval Inya Egbe

Reputation: 1

I use a WSL environment, and running npm i shadcn-ui worked for me (https://www.npmjs.com/package/shadcn-ui).

However, after installation, I encountered a high-severity issue related to lodash.template. I fixed it using npm audit fix --force. Then I ran npx shadcn-ui init.

This solution is for those using WSL with Windows.

Upvotes: 0

Ayeni Anthony
Ayeni Anthony

Reputation: 1951

There's an update to the installation process in the latest version. The shadcn-ui is no more in vogue, simply use shadcn.

Instead of: > npx shadcn-ui@latest add button

Do this: > npx shadcn@latest add button

The entire step in a new project could be like this:

  1. npm install shadcn or npm install -g shadcn
  2. npx shadcn@latest init
  3. npx shadcn@latest add button

Upvotes: 23

Doavers
Doavers

Reputation: 12

For installing latest shadcn-ui version 0.8.0 use this

npx [email protected] init

It also work with pnpm.

Upvotes: -2

Justin Torre
Justin Torre

Reputation: 135

There's a bug in the latest version, try this...

npx [email protected] add button

Upvotes: 7

adxxtya
adxxtya

Reputation: 879

I found the solution, it turns out that ShadCN just updated their website and changed their CLI library name, which is why the old commands stopped working.

Here's the new way to do it according to their updated documentation:

Step 1: Initialize the Project

You now need to initialize your project using their new CLI tool. Run the following command:

npx shadcn@latest init

This will set up your project by installing the necessary dependencies, configuring Tailwind CSS, and adding CSS variables.

Step 2: Adding Components

To add components like button, use the updated command:

npx shadcn@latest add button

This will prompt you to select components or add them directly by specifying the component name. Additional Tips:

If you're working within a monorepo, you can specify the working directory using the -c option:

npx shadcn@latest add button -c ./apps/www

It looks like ShadCN has made some improvements and changes, so make sure to check out their updated documentation for more details.

Upvotes: 53

Related Questions