125k

components.json

PreviousNext

プロジェクトの構成。

components.json ファイルには、プロジェクトの構成が保持されます。

これは、プロジェクトがどのように設定されているか、およびプロジェクト用にカスタマイズされたコンポーネントを生成する方法を理解するために使用されます。

次のコマンドを実行して、プロジェクト内に components.json ファイルを作成できます。

pnpm dlx shadcn@latest init

詳細については、CLI セクションを参照してください。

$schema

components.json の JSON スキーマは こちら で確認できます。

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json"
}

style

コンポーネントのスタイル。 初期化後は変更できません。

components.json
{
  "style": "new-york"
}

default スタイルは非推奨になりました。代わりに、new-york スタイルを使用してください。

tailwind

CLI がプロジェクト内で Tailwind CSS がどのように設定されているかを理解するのに役立つ構成。

Tailwind CSS のセットアップ方法については、インストール セクションを参照してください。

tailwind.config

tailwind.config.js ファイルが配置されている場所へのパス。 Tailwind CSS v4 の場合は、空白のままにしておきます。

components.json
{
  "tailwind": {
    "config": "tailwind.config.js" | "tailwind.config.ts"
  }
}

tailwind.css

Tailwind CSS をプロジェクトにインポートする CSS ファイルへのパス。

components.json
{
  "tailwind": {
    "css": "styles/global.css"
  }
}

tailwind.baseColor

これは、コンポーネントのデフォルトのテーマ トークンを生成するために使用されます。 初期化後は変更できません。

components.json
{
  "tailwind": {
    "baseColor": "neutral" | "stone" | "zinc" | "mauve" | "olive" | "mist" | "taupe"
  }
}

tailwind.cssVariables

テーマには CSS 変数を使用し、推奨します。

tailwind.cssVariables を true に設定して、background、foreground、primary などのセマンティック テーマ トークンを生成します。代わりにインライン Tailwind カラー ユーティリティを生成するには、これを false に設定します。

components.json
{
  "tailwind": {
    "cssVariables": `true` | `false`
  }
}

詳細については、テーマに関するドキュメントを参照してください。

初期化後は変更できません。 CSS 変数とユーティリティ クラスを切り替えるには、コンポーネントを削除して再インストールする必要があります。

tailwind.prefix

Tailwind CSS ユーティリティ クラスに使用するプレフィックス。コンポーネントはこのプレフィックスを付けて追加されます。

components.json
{
  "tailwind": {
    "prefix": "tw-"
  }
}

rsc

React サーバー コンポーネントのサポートを有効にするかどうか。

true に設定すると、CLI は use client ディレクティブをクライアント コンポーネントに自動的に追加します。

components.json
{
  "rsc": `true` | `false`
}

tsx

TypeScript コンポーネントと JavaScript コンポーネントのどちらかを選択します。

このオプションを false に設定すると、コンポーネントを .jsx ファイル拡張子を持つ JavaScript として追加できるようになります。

components.json
{
  "tsx": `true` | `false`
}

aliases

CLI はこれらの値を使用して、生成されたコンポーネントを正しい場所に配置し、インポートを再書き込みします。

これらのエイリアスは次のいずれかを使用してバックアップできます。

  1. tsconfig.json または jsconfig.json の compilerOptions.paths
  2. TypeScript パッケージのインポート解決が有効になっている package.json#imports

CLI を使用する場合は、components.json のエイリアスが引き続き必要です。これらは、どのインポート ルートが components、ui、lib、hooks、および utils にマップされるかを CLI に指示します。

tsconfig または jsconfig パスの使用

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

package.json#imports の使用

単一パッケージ アプリの推奨設定:

package.json
{
  "imports": {
    "#components/*": "./src/components/*.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#hooks/*": "./src/hooks/*.ts"
  }
}
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolvePackageJsonImports": true
  }
}
components.json
{
  "aliases": {
    "components": "#components",
    "ui": "#components/ui",
    "lib": "#lib",
    "hooks": "#hooks",
    "utils": "#lib/utils"
  }
}

components.json のエイリアスは、CLI に components、ui、lib、hooks、utils をどこに配置するかを指示します。package.json#imports は、これらの #... 指定子に対するランタイムおよび TypeScript の解決を提供します。

一致する imports ターゲットは、生成される #... インポートがファイル拡張子を保持するかどうかも制御します:

  • "#components/*": "./src/components/*" はソース拡張子を保持し、#components/button.tsx のようなインポートを生成します
  • "#components/*": "./src/components/*.tsx" はソース拡張子を削除し、#components/button のようなインポートを生成します

モノリポジトリについては、モノリポジトリのドキュメントを参照してください。ローカルワークスペースのエイリアスには package.json#imports を使用できますが、@workspace/ui/components のような共有ワークスペースのインポートは、対象パッケージの exports から解決されます。

フレームワーク固有の設定については、パッケージ インポート ガイド を参照してください。

aliases.utils

ユーティリティ関数のエイリアスをインポートします。

components.json
{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

aliases.components

コンポーネントのエイリアスをインポートします。

components.json
{
  "aliases": {
    "components": "@/components"
  }
}

aliases.ui

ui コンポーネントのエイリアスをインポートします。

CLI は、aliases.ui 値を使用して、ui コンポーネントを配置する場所を決定します。 ui コンポーネントのインストール ディレクトリをカスタマイズする場合は、この構成を使用します。

components.json
{
  "aliases": {
    "ui": "@/app/ui"
  }
}

aliases.lib

format-date や generate-id などの lib 関数のエイリアスをインポートします。

components.json
{
  "aliases": {
    "lib": "@/lib"
  }
}

aliases.hooks

use-media-query や use-toast など、hooks のエイリアスをインポートします。

components.json
{
  "aliases": {
    "hooks": "@/hooks"
  }
}

registries

プロジェクト用に複数のリソース レジストリを構成します。これにより、プライベート レジストリを含むさまざまなソースからコンポーネント、ライブラリ、ユーティリティ、その他のリソースをインストールできるようになります。

詳細については、名前空間レジストリドキュメントを参照してください。

基本構成

URL テンプレートを使用してレジストリを構成します。

components.json
{
  "registries": {
    "@v0": "https://v0.dev/chat/b/{name}",
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": "https://internal.company.com/{name}.json"
  }
}

{name} プレースホルダーは、インストール時にリソース名に置き換えられます。

認証を使用した高度な構成

認証が必要なプライベート レジストリの場合:

components.json
{
  "registries": {
    "@private": {
      "url": "https://api.company.com/registry/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}",
        "X-API-Key": "${API_KEY}"
      },
      "params": {
        "version": "latest"
      }
    }
  }
}

${VAR_NAME} 形式の環境変数は、環境から自動的に展開されます。

名前空間レジストリの使用

構成が完了したら、名前空間構文を使用してリソースをインストールします。

# Install from a configured registry
npx shadcn@latest add @v0/dashboard
 
# Install from private registry
npx shadcn@latest add @private/button
 
# Install multiple resources
npx shadcn@latest add @acme/header @internal/auth-utils

例: 複数のレジストリのセットアップ

components.json
{
  "registries": {
    "@shadcn": "https://ui.shadcn.com/r/{name}.json",
    "@company-ui": {
      "url": "https://registry.company.com/ui/{name}.json",
      "headers": {
        "Authorization": "Bearer ${COMPANY_TOKEN}"
      }
    },
    "@team": {
      "url": "https://team.company.com/{name}.json",
      "params": {
        "team": "frontend",
        "version": "${REGISTRY_VERSION}"
      }
    }
  }
}

この構成により、次のことが可能になります。

  • shadcn/ui からパブリック コンポーネントをインストールする
  • 認証を使用して自社のプライベートな UI コンポーネントにアクセスする
  • バージョンを指定してチーム固有のリソースを使用する

認証の詳細については、Authentication ドキュメントを参照してください。