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 (1)
worked, thanks )