Describe the bug

I am having a hard time to understand the setup from the oficial docs. There is not enough information, or information is wrong, or your package has several flaws that prevented me to try 3 times and fail to try it out on a project.

Affected component/components

INSTALATION PROCESS

How to reproduce

FIRST TRY:

• I opened https://ui.shadcn.com/docs/installation and read

Run the following command to create a new project with shadcn/ui:
yarn shadcn@latest init

That gave me this output:

u@s ~/CODE> yarn shadcn@latest init
yarn run v1.22.22
error Couldn't find a package.json file in "˜/CODE"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So.... what's going on here?

• Is this supposed to run in a already set up project?
• Is the yarn version that needs to be addressed?? There is no mention of version 2, (that no one uses BTW)
• What are the hidden steps?? I don't know your project and I am lost on the first this I tried.

Second try

Ah, no issue, I go to pickup a framework and set it there... so I clicked on VITE and went to https://ui.shadcn.com/docs/installation/vite
Oh, simple enough, will be like something like vite scafolding.

So I run yarn shadcn@latest init -t vite... same output above. Mayve if I scafold a vite app and setup tailwind v4.

yarn create vite chade --template react-ts
cd chad
yarn add -D tailwindcss @tailwindcss/vite
vi vite.config.ts // to add tailwind plugin.

u@s ~/C/chade (main) [1]> yarn shadcn@latest init -t vite
yarn run v1.22.22
error Command "shadcn@latest" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

NOPE! Same message.
Now I thought: OK YARN IS BROKEN for this.
I give up and lets use npm.

toffoletto@caipora ~/D/C/chade (main)> npx shadcn@latest init --template vite
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✖ Validating import alias.

No Tailwind CSS configuration found at ~/CODE/chade.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.

OK!! NOW WE ARE TALKING. I can finally see something to fix.

Tailwind issue...

So, I had Vite setup and the tailwind plugin configured... but the message only went away when I created (I meaning AI) a default tailwind.config.js at root.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Only then I got green on the TW setup.

ALIAS issue.

So I configured alias as it asked:

tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2023",
    "useDefineForClassFields": true,
    "lib": ["ES2023", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* Path mapping */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { resolve } from "node:path";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
});

And still I get this:

u@s ~/C/chade (main) [1]> npx shadcn@latest init --preset b6pN7ZbQZu --template vite
✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS. Found v4.
✖ Validating import alias.

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.

It seems you are looking at tsconfig.json but modern vite setups have different files for app/node:
this is the root tsconfig:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

Conclusion:

Telling me Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias. is pointless, because there is no documentation on that there. Also, I had to imagine what were solutions and problems due lack of logs. And finally even with the correct solution, the commands where not successful.

PS: Forgot to mention:

Oh, in the middle of looking at your docs I remembered to see a banner saying: Starting fresh? Use [shadcn/create](https://ui.shadcn.com/create) to configure a Vite project with custom themes, Base UI or Radix, and icon libraries.

So I opened https://ui.shadcn.com/create, played around with the colors and fonts, but upon create gave me the command to use on my second try..... This is a bit misleading. Needs clarification for someone new to this project.

System Info

OS: macOS 15.7.3 24G419 arm64
Kernel: 24.6.0
Shell: fish 4.0.1
Node:v22.18.0 
Yarn:1.22.22n
NPM: 10.9.3

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues