Running of npx shadcn-ui@latest add button is adding the button to the ~folder which is outside the SRC directory

[swami2404-rgb]

I am running the npx shadcn-ui@latest add button it was creating the button component in the ~ folder which is outside the src directory

but its becomming an issue when i ran npm start becasue create-react-app asks to keep all the components inside the src directory

The below is my components.json

{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.js", "css": "app/index.css", "baseColor": "slate", "cssVariables": true, "prefix": "tailwind.config.js" }, "aliases": { "components": "~", "utils": "~/lib/utils" } }

tsconfi.json

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, // tsconfig.json "baseUrl": ".", "paths": { "~": ["./app"], "~/": ["./app/"] }, "include": [ "src" ] }

[V-Mokhun]

You need to specify your components directory in aliases in your components.json file "aliases": { "components": "" } -> Specify your directory for components, for example "components: "src/components""

[swami2404-rgb]

Thanks @V-Mokhun . I have done it but the cn function which is being imported by the button is from utils in the lib

When i add the button it was generating the utils importing path from the component path like as below

import { cn } from "@/utils"

const buttonVariants = cva( "inline-flex items-cen ..

My components.json file is as below "aliases": { "components": "src/components", "utils": "@/utils" }

I also tried modifying the tsconfig.json as below

"baseUrl": "./src", "paths": { "@utils/": ["utils/"], "@components/": ["components/"] }, "include": [ "src","src/*/.tsx" ] }

But its not taking the utils from the correct path

All i want is to place both the components and the lib/utils inside the src directory

[V-Mokhun]

Well, @swami2404-rgb here's how I do it:

components.json

 "aliases": {
    "components": "@/components",
    "utils": "@/lib"
  }

tsconfig.json

  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }

And the folder structure is both components and lib directories are located in src Let me know if this helps

[swami2404-rgb]

Thanks @V-Mokhun Still its giving me like @utils module not found

[V-Mokhun]

Could you give screenshots of your file tree, components.json, tsconfig.json and Button.tsx? I'm a little confused

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[mezzouhri]

Well, @swami2404-rgb here's how I do it:

components.json

"aliases": {
   "components": "@/components",
   "utils": "@/lib"
 }

tsconfig.json

  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }

And the folder structure is both components and lib directories are located in src Let me know if this helps

you should use "utils": "@/lib/utils" instead of "utils": "@/lib", it should be like below :

components.json

  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },

tsconfig.json

  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }