125k

2026 年 5 月 - パッケージのインポートとターゲット エイリアス

package.json インポートとポータブル レジストリ ターゲット エイリアスを使用して shadcn/ui を構成します。

shadcn@4.7.0 の files.target でのパッケージのインポートとエイリアスのサポートを追加しました。

パッケージのインポート

shadcn CLI は、コンポーネントのインストール用に package.json#imports をサポートするようになりました。インポートの書き換えやサードパーティのレジストリ解決にも利用され、プライベートなインポートにも対応しています。tsconfig.json の compilerOptions.paths にある #... のみに依存するのではなく、package.json からエイリアスをインポートできます。

package.json
{
  "imports": {
    "#components/*": "./src/components/*.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#hooks/*": "./src/hooks/*.ts"
  }
}

次に、components.json で同じルートを使用します。

components.json
{
  "aliases": {
    "components": "#components",
    "ui": "#components/ui",
    "lib": "#lib",
    "hooks": "#hooks",
    "utils": "#lib/utils"
  }
}

これは、アプリのローカル ファイルがパッケージ インポートを使用するモノリポジトリでも機能します。 共有 UI ファイルは、ワークスペース パッケージのエクスポートからインポートされます。

セットアップの詳細については、パッケージ インポート ガイド を参照してください。

ターゲットのエイリアス

レジストリ項目は、files[].target のターゲットエイリアスを使用して、ユーザーが構成した shadcn ディレクトリ配下にファイルをインストールできるようになりました。たとえば、次のレジストリ項目は、ui/ai ディレクトリに prompt-input.tsx ファイルをインストールします。

example.json
{
  "files": [
    {
      "path": "registry/default/ai/prompt-input.tsx",
      "type": "registry:ui",
      "target": "@ui/ai/prompt-input.tsx"
    }
  ]
}

さらに詳しくは、レジストリの例 を参照してください。