How to Fix Shadcn UI Adding Wrong Folder for Components

#nextjs #shadcn #webdev

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!