2024年8月 - npx shadcn init

これは、多くの新機能と改善を加えて完全に書き直されました。 npx shadcn add を使用して、コンポーネント、テーマ、フック、ユーティリティなどをインストールできるようになりました。

これは、あなたとあなたの LLM がアクセスして使用できるコードを配布するための大きな一歩です。

1. まず、CLI は、すべての主要な React フレームワークをサポートするようになりました。 Next.js、Remix、Vite、Laravel。新しいアプリを開始すると、既存の Tailwind ファイルが上書きされるのではなく更新されます。
2. コンポーネントは独自の依存関係を配布するようになりました。アコーディオンを例に挙げると、Tailwind キーフレームを定義できます。これをプロジェクトに追加すると、それに応じて tailwind.config.ts ファイルが更新されます。
3. URL を使用してリモートコンポーネントをインストールすることもできます。
4. init コマンドも改善されました。フレームワークの検出を行い、1 つのコマンドで新しい Next.js アプリを開始することもできます。
5. 独自のコンポーネント レジストリを配布するために使用できる新しいスキーマを作成しました。 URL もサポートされているため、プライベートコンポーネントの配布にも使用できます。
6. さらに、エラー処理の改善やモノレポのサポートなど、いくつかの更新が加えられています。

新しい cli を今すぐお試しいただけます。

pnpmnpmyarnbun
pnpm dlx shadcn init sidebar-01 login-01
コピー

プロジェクトを更新する#

新しい CLI を使用するためにこのプロジェクトを更新するには、components、utils、ui、lib、hooks のインポート エイリアスを含めて components.json ファイルを更新します。

コピー{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tailwind": {
    // ...
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

別のインポート エイリアス プレフィックスを使用している場合、たとえば~、@ をプレフィックスに置き換えます。