I wish to share the observation and simple fix for Shadcn UI components folder issue.
Issue
When I run shadcn-ui@latest to add any other the UI components, then it adds the file to a new directory: @/components/ui/ under /src rather than the existing components/ui directory which I have created and updated in the tsconfig.json along with next app setup.
Below is the config which I have in the tsconfig.json.
"baseUrl": "src", "paths": { "@/app/*": ["app/*"], "@/components/*": ["components/*"], "@/lib/*": ["lib/*"], "@/styles/*": ["styles/*"] // "@/*": ["./src/*"] }
and the auto generated components.json by shadcn-ui@latest is as below.
{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "src/styles/globals.css", "baseColor": "slate", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils" }
}
When we invoke the CLI command to add a Button with npx shadcn-ui@latest add button then it adds a new folder below /src as @ and then components/ui and then putting the button.tsx.
Thus, it’s not able to view the existing /src/components folder.
The fix
I noticed that the default components.json looks at the alias in tsconfig.json so the key should match in the components.json.
Hence, we need to change in components.json as below.
{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "src/styles/globals.css", "baseColor": "slate", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components/*", "utils": "@/lib/utils" }
}
We can notice that in aliases, we have added /* for components to match the key in tsconfig.json.
Thats it !!, it was simple!