概要

shadcn/uiのコンポーネントをインポートしようとして見つからない場合のエラーです。

エラーメッセージ

``` Module not found: Can’t resolve ‘@/components/ui/button’ ```

原因

コンポーネント未追加: npx shadcn-ui add を実行していない
パスエイリアスの設定ミス: @/ が設定されていない
初期化していない: npx shadcn-ui init を実行していない
components.jsonの設定誤り: パスが間違っている

解決策

1. 初期化を実行

```bash

初期化

npx shadcn-ui@latest init

質問に回答

✔ Would you like to use TypeScript? yes ✔ Which style would you like to use? Default ✔ Which color would you like to use as base color? Slate ✔ Where is your global CSS file? app/globals.css ✔ Do you want to use CSS variables? yes ✔ Where is your tailwind.config.ts? tailwind.config.ts ✔ Configure the import alias for components? @/components ✔ Configure the import alias for utils? @/lib/utils ```

2. コンポーネントを追加

```bash

個別に追加

npx shadcn-ui@latest add button npx shadcn-ui@latest add card npx shadcn-ui@latest add input

複数同時に追加

npx shadcn-ui@latest add button card input form ```

3. tsconfig.jsonでパスエイリアスを設定

```json // tsconfig.json { “compilerOptions”: { “baseUrl”: “.”, “paths”: { “@/”: ["./"] } } } ```

4. components.jsonを確認

```json // components.json { “$schema”: “https://ui.shadcn.com/schema.json", “style”: “default”, “rsc”: true, “tsx”: true, “tailwind”: { “config”: “tailwind.config.ts”, “css”: “app/globals.css”, “baseColor”: “slate”, “cssVariables”: true }, “aliases”: { “components”: “@/components”, “utils”: “@/lib/utils” } } ```

5. 使用例

```tsx // app/page.tsx import { Button } from “@/components/ui/button”; import { Card, CardContent, CardHeader, CardTitle } from “@/components/ui/card”;

export default function Home() { return ( Welcome Click me ); } ```

よくある間違い

components/ui/ ディレクトリを手動で作成
古いバージョンのCLIを使用
Tailwind CSSの設定が不完全

shadcn/ui: Component not found

概要