mcpField
S
shadcn-baseui

shadcn-baseui

github.com/thunderboltdev開発0248 回インストール39 週間前に更新
リポジトリ

shadcn-baseui について

shadcn-baseuiは、Base UIを使うshadcn/uiコンポーネント向けの開発ガイドです。Base UIの`render`スロットパターンと、Accordion、Button、SelectなどにおけるRadix UIとのAPIの違いを説明します。

主な機能

  1. 01Base UI採用プロジェクトの確認
  2. 02`asChild`ではなく`render`を使用
  3. 03Accordionのプロパティ差分の説明
  4. 04Buttonの`nativeButton`要件の説明
  5. 05Selectの配置オプションの説明

活用シーン

  1. 01Base UIプロジェクトでのコンポーネント実装
  2. 02Radix UIのパターンをBase UI向けに変更
  3. 03Accordionの単一・複数モード設定
  4. 04Buttonでリンク要素を表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thunderboltdev/shadcn-baseui --skill shadcn-baseui

インストール後、Claude Code で/shadcn-baseuiを入力して読み込まれたか確認します。

同梱ファイルLICENSEREADME.md

詳細

shadcn/ui + Base UI ガイドライン

Base UI を使用する際の shadcn/ui コンポーネントの使い方に関するガイドです。LLM が Radix UI のパターン（asChild など）を誤って提案することを防ぎます。

⚠️ 重要： コードを提案する前に、components.json を確認して Base UI プロジェクトかどうかを確かめてください。style フィールドは "base-" で始まっている必要があります（例："base-vega"、"base-nova"、"base-maia"、"base-lyra"、"base-mira"）。それ以外で始まっている場合、このスキルは適用されません。

@base-ui/react パッケージがインストールされていることを確認してください。インストールされていない場合は、適切なパッケージマネージャーを使用してインストールしてください。

スロットパターン

Radix UI と Base UI の主な違いは、スロットパターンです。Radix UI は asChild を使用し、Base UI は render prop を使用します。常に asChild よりも render prop を使用してください。

ルール： すべてのトリガー／ラッパーコンポーネントでは、asChild の代わりに必ず render prop を使用してください。

対象：DialogTrigger、AlertDialogTrigger、PopoverTrigger、DropdownMenuTrigger、TooltipTrigger、SelectTrigger、TabsTrigger、AccordionTrigger、Button（リンクをラップする場合）など。

// ❌ INCORRECT
<DialogTrigger asChild>
  <Button variant="outline">Click me</Button>
</DialogTrigger>

// ✅ CORRECT
<DialogTrigger render={<Button variant="outline" />}>
  Click me
</DialogTrigger>

// ✅ ALSO CORRECT
<DialogTrigger render={<Button variant="outline">Click me</Button>} />

Props

スロットパターン以外で props が異なるのは、以下のコンポーネントのみです。これらのコンポーネントを使用する際は、コンポーネント固有のガイドに従ってください。

Accordion

Accordion コンポーネントに type prop はありません。代わりにブール値の multiple prop を使用してください。defaultValue prop は常に配列形式です。

  1. 単一モード
// ❌ INCORRECT
<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    // ...
  </AccordionItem>
</Accordion>

// ✅ CORRECT
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    // ...
  </AccordionItem>
</Accordion>
  1. 複数モード
// ❌ INCORRECT
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">...</AccordionItem>
  <AccordionItem value="item-2">...</AccordionItem>
</Accordion>

// ✅ CORRECT
<Accordion multiple defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">...</AccordionItem>
  <AccordionItem value="item-2">...</AccordionItem>
</Accordion>
Button（特別なケース）

Button を Link などのボタン以外の要素としてレンダリングする場合は、nativeButton={false} を追加する必要があります。

// ❌ INCORRECT - Radix pattern
import Link from "next/link";

<Button asChild variant="ghost">
  <Link href="/dashboard">Dashboard</Link>
</Button>

// ✅ CORRECT - Base UI pattern
import Link from "next/link";

<Button render={<Link href="/dashboard" />} variant="ghost" nativeButton={false}>
  Dashboard
</Button>
Select

position prop は、デフォルトで true のブール値 prop alignItemWithTrigger に置き換えられています。

// ❌ INCORRECT
<SelectContent position="popper">
  // ...
</SelectContent>

// ✅ CORRECT
<SelectContent alignItemWithTrigger={false}>
  // ...
</SelectContent>

コメント

Markdown 対応