Changelog

すべての shadcn コンポーネントは、cn パッケージから cn をインポートするようになりました。

何年もの間、すべての shadcn プロジェクトは lib/utils.ts の同じ 5 行から始まっていました。clsx をインポートし、twMerge をインポートし、一方をもう一方でラップして cn としてエクスポートする、というものです。それでも動作はしましたが、2 つの依存関係とヘルパー関数を、すべてのプロジェクトとレジストリにコピーする必要があるということでもありました。

そこでこれをパッケージに切り出しました。cn は twMerge(clsx(...)) のドロップイン代替品です。より小さく、より高速で、同じ API のまま提供されるため、呼び出し側のコードは何も変更する必要がありません。

コピーimport { cn } from "cn"
 
;<div className={cn("flex items-center", className)} />

何が変わったのか#

• レジストリ コンポーネント、ブロック、例では、@/lib/utils の代わりに cn パッケージから cn をインポートするようになりました。
• npx shadcn init は、cn をインストールし、一行の lib/utils.ts を生成します。
• cn を使用するすべてのレジストリ アイテムは、これを依存関係として宣言しています。この変更より前に作成されたプロジェクトでも、npx shadcn add を実行すればインストールされます。

lib/utils.ts#

utils レジストリ アイテムは今も存在します。これからは cn を再エクスポートするだけになるので、独自のコードはそのまま動作し続け、プロジェクト固有のヘルパーを置く場所も 1 か所にまとまります。

コピーexport { cn } from "cn"

既存のプロジェクト#

何も壊れません。lib/utils.ts はそのまま動作し続け、新しくインストールするコンポーネントはその隣に cn をインストールします。プロジェクトの残りの部分も移行したい場合は、clsx と tailwind-merge を削除して、マイグレーションを実行してください。

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate cn
コピー

インポートを書き換え、twMerge(clsx(...)) の呼び出しを置き換え、古いパッケージを参照するコードがなくなれば、それらのパッケージも削除します。詳細については、CLI ドキュメント を参照してください。

GitHub レジストリがプライベート リポジトリで動作するようになりました。

6 月に、あらゆるパブリック GitHub リポジトリをレジストリに変換できる機能を提供しました。チームからは、公開すべきではないデザインシステムや機能キット、エージェントのルールや規約といった内部コードについても、同じことができるようにしてほしいという要望がありました。

プライベート リポジトリからインストールできるようになりました。リポジトリを読み取れる場合は、 CLI はそこからインストールできます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit
コピー

ゼロ構成#

GitHub CLI にログインしている場合は、何も設定する必要はありません。

コピーgh auth login

リポジトリが公開されていない場合、CLI は gh に保存されている認証情報を使ってリポジトリを読み取ります。トークンは GitHub CLI の内部にとどまり、shadcn のプロセスに渡ることは一切ありません。

コピー✔ Using gh credentials.
✔ Checking registry.
✔ Created 1 file:
  - lib/auth.ts

CI サポート#

GitHub CLI がインストールされていない場合は、GH_TOKEN または GITHUB_TOKEN を設定します。

コピーGH_TOKEN=github_pat_xxx npx shadcn@latest add acme/internal-toolkit/auth-kit

コンテンツ: 読み取り専用 アクセス権を持つ、リポジトリにスコープされたきめ細かい個人アクセス トークンの使用をお勧めします。

すべてのコマンドで動作します#

プライベート リポジトリは、パブリック GitHub レジストリと同じコマンドで動作します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest list acme/internal-toolkit
コピー

pnpmnpmyarnbun
pnpm dlx shadcn@latest search acme/internal-toolkit --query auth
コピー

pnpmnpmyarnbun
pnpm dlx shadcn@latest view acme/internal-toolkit/auth-kit
コピー

pnpmnpmyarnbun
pnpm dlx shadcn@latest registry validate acme/internal-toolkit
コピー

仕組み#

• パブリック リポジトリは、以前とまったく同じように匿名で読み取られます。認証情報は一切使用されず、GitHub CLI が呼び出されることもありません。
• CLI はまず匿名アクセスを試み、リポジトリが公開されていない場合にのみ認証情報を使用します。
• プライベート ファイルは GitHub のコンテンツ API を通じて読み取られ、解決されたコミット SHA に固定されます。
• GH_TOKEN からのトークンは、api.github.com にのみ送信されます。保存された GitHub CLI の認証情報は、shadcn の CLI ではなく gh 自身によって読み取られます。

完全なガイドについては、プライベート リポジトリ のドキュメントを参照してください。

@shadcn/helpers は、AI SDK の human-in-the-loop（人間参加型）フローをモックできるようになりました。スクリプト化された会話を、実際のユーザー入力を待って一時停止させたり、承認を待たせたりした上で、ユーザーが決定した内容に応じてそのまま続行させることができます。

すべてが本物の useChat ライフサイクルを流れるため、ツール カード、承認プロンプト、質問フローは、本番環境とまったく同じように動作します。

コピーimport { createChat } from "@shadcn/helpers/ai-sdk"
 
const chat = createChat<ChatMessage>()
  .user("Help me plan the next prototype.")
  .assistant(({ writer }) => {
    writer.text("A couple of questions before I start.")
    writer.tool("askQuestions", { input: { questions } })
  })
  .assistant(({ writer, toolCall }) => {
    writer.text(
      toolCall?.name === "askQuestions" && toolCall.output
        ? `Starting with ${toolCall.output.answers.direction}.`
        : "Starting now."
    )
  })

ユーザーの判断を待って一時停止させるには needsApproval を渡します。スクリプト化された出力は承認後にストリーミングされ、拒否された場合は自動的にストリーミングされます。

コピーchat
  .assistant(({ writer }) => {
    writer.text("That will archive 3 drafts. I need your approval.")
    writer.tool("archiveDrafts", {
      input: { count: 3 },
      needsApproval: true,
      output: { archived: 3 },
    })
  })
  .assistant(({ writer, toolCall }) => {
    writer.text(
      toolCall?.approved ? "Archived 3 drafts." : "Okay, leaving them in place."
    )
  })

本日、マルチステップの質問フロー用の新しいコンポーネント Questionnaire をリリースしました。エージェントの確認プロンプトやオンボーディング、アンケート、受付フォーム、設定などに使用できます。

アンケートは、Base UI、React Aria、Radix の全 8 スタイルで利用できます。

"use client"

import * as React from "react"

特徴#

• ネイティブなラジオボタンとチェックボックスによる単一選択および複数選択。
• 固定の選択肢と自由形式の回答。
• 任意の質問を明示的にスキップする機能。
• 前へ、次へ、送信、およびカスタム進行状況コントロール。
• 必須項目とカスタム検証。
• 制御されたナビゲーション、保存されたデフォルト、および条件付きの質問。
• オプションの文字または数字のショートカットを使用したキーボード ナビゲーション。
• ネイティブ フォームのシリアル化とサーバーでレンダリングされたコレクション状態。
• スタンドアロン、カード、ダイアログの構成。

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add questionnaire
コピー

@shadcn/react#

<Questionnaire /> コンポーネントは、@shadcn/react のスタイルなしのヘッドレス プリミティブとしても使用できます。詳細については、ドキュメントをお読みください。

レジストリはサーバー側で検索を処理できるようになりました。

shadcn search を実行すると、CLI は検索パラメータをクエリ パラメータとしてレジストリに送信します。

コピーGET /r/registry.json?q=button&limit=50&offset=0

レジストリは、一致するアイテムを pagination オブジェクトとともに返します。CLI はその結果をそのまま表示します。これにより、大規模なレジストリでの検索が高速化され、検索のためにカタログ全体をダウンロードする必要もなくなります。

コピー{
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "description": "A button component."
    }
  ],
  "pagination": {
    "total": 12,
    "offset": 0,
    "limit": 1,
    "hasMore": true
  }
}

動的検索はオプトインです。静的レジストリはクエリ パラメータを無視し、何も変更しなくてもそのまま動作し続けます。

詳細については、動的検索 ドキュメントを参照してください。