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!
Top comments (2)
I just hate the fact that it's hard to compare the changes you made even though it's just one line. You didn't even highlight the changes you made smh. Readers like to scan and not read everything because you know we're busy.
worked, thanks )