Issue with setting up shadcn/ui in Next.js project using src/ directory

[Jacksonmills]

I recently tried setting up shadcn/ui in my Next.js project. However, I encountered an issue when I structured my Next.js app with the src/ directory and the app directory nested inside the src/. This setup caused my entire application to break.

Specifically, here's how I structured my Next.js app:

.
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   ├── ui
│   │   │   ├── alert-dialog.tsx
│   │   │   ├── button.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   └── ...
│   │   ├── main-nav.tsx
│   │   ├── page-header.tsx
│   │   └── ...
│   ├── lib
│   │   └── utils.ts
│   ├── styles
│   │   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

The setup was done according to the documentation with the only difference being the src/ directory.

Interestingly, when I scaffolded the same project without the src/ directory, the setup worked flawlessly.

As this is a common Next.js project structure (having the src/ directory), it would be great if the documentation can be updated to account for this, or if the setup can be modified to support this structure.

Please let me know if you need more information or clarification on this issue. I'm glad to assist in any way I can.

Cheers

[everydaycono]

Potential Solutions: Since you have app directory inside src folder let shadcn knows where is your app folder is Where is your global CSS file? … src/app/globals.css

[Jacksonmills]

Potential Solutions: Since you have app directory inside src folder let shadcn knows where is your app folder is Where is your global CSS file? … src/app/globals.css

I think I tested this via manual setup instead of the CLI, but still had 404 page errors, I will try again though

[plbstl]

@Jacksonmills you can check this issue #755 for possible solutions

[mokshith-moksh]

same Error

[saniyasaher20]

I have created a fresh new project and using just these commands, nothing else,

npx create-next-app@latest my-app --tailwind --eslint

npx shadcn-ui@latest init

npm run dev

Getting a 404 page not found error.

[saniyasaher20]

I recently tried setting up shadcn/ui in my Next.js project. However, I encountered an issue when I structured my Next.js app with the src/ directory and the app directory nested inside the src/. This setup caused my entire application to break.

Specifically, here's how I structured my Next.js app:

.
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   │   ├── ui
│   │   │   ├── alert-dialog.tsx
│   │   │   ├── button.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   └── ...
│   │   ├── main-nav.tsx
│   │   ├── page-header.tsx
│   │   └── ...
│   ├── lib
│   │   └── utils.ts
│   ├── styles
│   │   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

The setup was done according to the documentation with the only difference being the src/ directory.

Interestingly, when I scaffolded the same project without the src/ directory, the setup worked flawlessly.

As this is a common Next.js project structure (having the src/ directory), it would be great if the documentation can be updated to account for this, or if the setup can be modified to support this structure.

Please let me know if you need more information or clarification on this issue. I'm glad to assist in any way I can.

Cheers

Thanks for raising this issue, It helped

[Jacksonmills]

I have created a fresh new project and using just these commands, nothing else,

npx create-next-app@latest my-app --tailwind --eslint

npx shadcn-ui@latest init

npm run dev

Getting a 404 page not found error.

https://github.com/shadcn-ui/ui/issues/755#issuecomment-1612617783

check out this solution, its most likely an issue in your components.json

[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.

[e-scorp]

update tsconfig.json "paths": { "@/*": ["./src/*"] } it works for src/app