This content originally appeared on DEV Community and was authored by Rajesh Singh
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!
This content originally appeared on DEV Community and was authored by Rajesh Singh
Rajesh Singh | Sciencx (2024-08-04T08:55:14+00:00) How to Fix Shadcn UI Adding Wrong Folder for Components. Retrieved from https://www.scien.cx/2024/08/04/how-to-fix-shadcn-ui-adding-wrong-folder-for-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.