125k

2026 年 3 月 - shadcn/cli v4

より高機能で、より使いやすくなりました。あなたとあなたのコーディングエージェントのために構築されています。スキル、プリセット、ドライラン、新しいテンプレート、モノリポジトリなど。

shadcn/cli のバージョン 4 をリリースします。より高機能に、より使いやすく。あなたとあなたのコーディングエージェントのために構築されています。ここにはすべてが新しいものです。

shadcn/skills

shadcn/skills は、コンポーネントとレジストリを正しく操作するために必要なコンテキストをコーディングエージェントに提供します。Radix と Base UI プリミティブの両方、更新された API、コンポーネント パターン、レジストリ ワークフローについて説明します。このスキルは、shadcn CLI の使用方法、いつ呼び出すか、どのフラグを渡すかについても認識しています。エージェントは間違いを減らし、実際にデザインシステムと一致するコードを生成します。

エージェントには、次のような指示を出すことができます。

  • 「新しい vite モノレポを作成する」
  • 「tailark からヒーローを見つけて、ホームページに追加し、react-bits のアニメーションを使用してテキストをアニメーション化します。」
  • 「@clark からサインイン ページをインストールして構成します」
pnpm dlx skills add shadcn/ui

--preset の導入

プリセットは、デザインシステム構成全体を短いコードにパックします。色、テーマ、アイコン ライブラリ、フォント、半径。 1 つの文字列にすべてが含まれています。

shadcn/create でプリセットをビルドし、ライブでプレビューし、準備ができたらコードを取得します。

pnpm dlx shadcn@latest init --preset a1Dg5eFl

これを使用して、カスタム構成からプロジェクトをスキャフォールディングしたり、チームと共有したり、レジストリで公開したりできます。プロンプトにそれをドロップすると、エージェントがどこから始めればよいかわかるようになります。Claude、Codex、v0、Replit のいずれでも使用できます。プリセットを持ち歩きましょう。

プリセットの切り替え

新しいアプリに取り組んでいるときは、気に入ったものを見つけるまでに数回試行する必要があるため、プリセットの切り替えが非常に簡単になりました。アプリで init --preset を実行すると、CLI がコンポーネントを含むすべての再構成を処理します。

pnpm dlx shadcn@latest init --preset ad3qkJ7

スキル + プリセット

エージェントはプリセットの使用方法を知っています。プロジェクトをスキャフォールディングし、デザインシステムを切り替えて、何か新しいことに挑戦してみましょう。

  • 「--preset adtk27v を使用して新しい Next.js アプリを作成します」
  • 「--preset adtk27v を試してみましょう」

新しい shadcn/create

カスタム プリセットの構築を支援するために、shadcn/create を再構築しました。プリセットのプレビューに使用できる UI コンポーネントのライブラリが含まれるようになりました。構築を開始する前に、色、フォント、半径が実際のコンポーネントにどのように適用されるかを確認してください。

新しい --dry-run、--diff、および --view フラグ

何かが書き込まれる前に、レジストリがプロジェクトに何を追加するかを調べてください。ペイロードを自分で確認するか、コーディング エージェントにパイプして再確認してください。

pnpm dlx shadcn@latest add button --dry-run
npx shadcn@latest add button --diff
npx shadcn@latest add button --view

プリミティブの更新

--diff フラグを使用して、レジストリの更新を確認できます。または、エージェントに「@shadcn からの更新を確認して、ローカルの変更とマージしてください」と依頼してください。

pnpm dlx shadcn@latest add button --diff

shadcn init --template

shadcn init は、Next.js、Vite、Laravel、React Router、Astro、TanStack Start の完全なプロジェクト テンプレートをスキャフォールディングするようになりました。Next.js と Vite にはダークモードが含まれています。

pnpm dlx shadcn@latest init

Select a template › - Use arrow-keys. Return to submit.
❯ Next.js
  Vite
  TanStack Start
  React Router
  Astro
  Laravel

--monorepo を使用してモノレポを設定します。

pnpm dlx shadcn@latest init -t next --monorepo

shadcn init --base

プリミティブを選択します。Radix または Base UI でプロジェクトを開始するには、--base を使用します。

pnpm dlx shadcn@latest init --base radix

shadcn info

info コマンドにより、フレームワーク、バージョン、CSS 変数、インストールされているコンポーネント、各コンポーネントのドキュメントと例の場所などの全体像が表示されるようになりました。コーディング エージェントにプロジェクトで作業するために必要なコンテキストを提供するのに最適です。

pnpm dlx shadcn@latest info

shadcn docs

CLI から直接、UI コンポーネントのドキュメント、コード、サンプルを入手できます。プリミティブを正しく使用するためのコンテキストをコーディング エージェントに提供します。

pnpm dlx shadcn@latest docs combobox

combobox
  - docs      https://ui.shadcn.com/docs/components/radix/combobox
  - examples  https://ui.shadcn.com/code/apps/v4/registry/bases/radix/examples/combobox-example.tsx
  - api       https://base-ui.com/react/components/combobox

registry:base と registry:font

レジストリは、registry:base を使用して、デザインシステム全体を単一のペイロードとして配布できるようになりました。コンポーネント、依存関係、CSS 変数、フォント、構成。 1 回のインストールですべてがセットアップされます。

フォントは現在、第一級のレジストリ タイプです。コンポーネントをインストールするのと同じ方法で、それらをインストールして構成します。

font-inter.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-inter",
  "type": "registry:font",
  "font": {
    "family": "'Inter Variable', sans-serif",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-sans",
    "subsets": ["latin"]
  }
}
pnpm dlx shadcn@latest add font-inter

リンク