Add to codebase only imports to components folder

I can’t seem to import the components and pages generated in v0 to the right folder in my codebase.

I’ve created a new next app (npx create-next-app@latest) and only installed shadcn.

When I “Add to codebase” and run the command “npx shadcn@latest add …” the file is always located in the “components” folder. If it’s a file that’s supposed to be inside a folder, it prepends the folder names followed by a dash.
For example:
“app/procedures/page.tsx” will import like this: “components/app-procedures-page.tsx”.

Is there something I have to change in the components.json or some other file?

I’m using Next 15 and React 19, with the latest version of shadcn (although I’ve been having this problem since the begining, when I was using Next 14 and React 18).

Thanks in advance!

Hi, @xusbadia!

I understand you’re having trouble with the file locations when importing components and pages generated in v0 into your Next.js project.

First, let’s check and modify your components.json file. This file is crucial for shadcn/ui to understand where to place the components. Here’s what you should do:

  1. Locate the components.json file in the root of your project.
  2. Open it and check its contents. It should look something like this:
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
  1. The key part we need to modify is the aliases section. Update it to include the correct paths for your project structure:
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "app": "@/app"
  }
}

By adding the "app": "@/app" line, we’re telling shadcn/ui to recognize the app directory as a valid location for components and pages.

After making this change, try the “Add to codebase” process again. The components and pages should now be placed in the correct directories.

If you’re still experiencing issues, here are a few additional things to check:

  1. Make sure your tsconfig.json or jsconfig.json has the correct path aliases:
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}
  1. Ensure that your Next.js config (next.config.js or next.config.mjs) doesn’t have any settings that might interfere with file paths.
  2. If you’re using a custom server or build process, make sure it’s not altering the file paths.

Let us know how you get on :slight_smile:

Thanks for the response.

Here’s my components.json file:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "stone",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "app": "@/app"
  }
}

And the next.config.ts file:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

I try to import a file and still get the same result: It imports to the components folder with the folder path separated by dashes.
I don’t really know what else could be wrong. Let me know if I can provide more information to try to find the culprit.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.