Module not found: Can't resolve '@/components/ui/button'

This error means your bundler can’t find the shadcn/ui component file. The component was either not installed correctly, installed to the wrong directory, or your path alias isn’t configured properly.

What causes this

shadcn/ui doesn’t install components into node_modules — it copies component source files directly into your project. The CLI uses a components.json config file to determine where to put them. If the path alias (@/) doesn’t resolve to the right directory, or the component file wasn’t created, you get this error.

Common triggers:

• The @/* path alias in tsconfig.json doesn’t match your project structure
• components.json points to the wrong directory
• The npx shadcn-ui add command failed silently or was interrupted
• You moved your src/ directory after running shadcn-ui init

Fix 1: Check your path alias in tsconfig.json

The @/* alias must point to the directory that contains your components/ folder:

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

If your project doesn’t use a src/ directory, adjust accordingly:

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

For Next.js, also make sure next.config.js isn’t overriding the webpack alias resolution.

Fix 2: Check components.json

The components.json file in your project root tells the shadcn CLI where to install components:

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

If aliases.components is @/components, the CLI will create files at src/components/ui/ (assuming @ maps to src). Make sure this matches your actual project structure.

Fix 3: Reinstall the component

If the file simply doesn’t exist, re-run the add command:

npx shadcn-ui@latest add button

Verify the file was created:

ls src/components/ui/button.tsx

If the CLI asks you to overwrite, say yes. If it errors out, check that components.json exists in your project root — run npx shadcn-ui@latest init if it doesn’t.

Fix 4: Check the utils dependency

Most shadcn/ui components import a cn() utility function. If that file is missing, the component itself will fail to resolve:

# Check if the utils file exists
ls src/lib/utils.ts

If it’s missing, create it:

// src/lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

And make sure the dependencies are installed:

npm install clsx tailwind-merge

Related resources

• React complete guide

How to prevent it

• Run npx shadcn-ui@latest init before adding any components. This creates components.json with the correct paths for your project.
• Don’t manually move component files after installation — update components.json and reinstall instead.
• If you’re using a monorepo, make sure the path alias resolves correctly from the package where you’re importing the component, not just from the root.

Related: React Interview Questions