shadcn

@json-render/shadcn

json-render 用の、事前構築済み shadcn/ui コンポーネント定義と実装です。Radix UI と Tailwind CSS を基盤とする 36 個のコンポーネントを提供します。

2 つのエントリーポイント

エントリーポイント	エクスポート	用途
@json-render/shadcn/catalog	shadcnComponentDefinitions	カタログスキーマ（React への依存がなく、サーバーで安全に使用できます）
@json-render/shadcn	shadcnComponents	React 実装

使用パターン

標準の定義から必要なコンポーネントを選んでください。すべての定義を展開せず、アプリで使用するものを明示的に選択してください。

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";

// Catalog: pick definitions
const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Stack: shadcnComponentDefinitions.Stack,
    Heading: shadcnComponentDefinitions.Heading,
    Button: shadcnComponentDefinitions.Button,
    Input: shadcnComponentDefinitions.Input,
  },
  actions: {},
});

// Registry: pick matching implementations
const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Stack: shadcnComponents.Stack,
    Heading: shadcnComponents.Heading,
    Button: shadcnComponents.Button,
    Input: shadcnComponents.Input,
  },
});

状態アクション（setState、pushState、removeState）は React スキーマに組み込まれており、ActionProvider によって自動的に処理されます。宣言する必要はありません。

カスタムコンポーネントの拡張

標準コンポーネントと一緒にカスタムコンポーネントを追加できます。

const catalog = defineCatalog(schema, {
  components: {
    // Standard
    Card: shadcnComponentDefinitions.Card,
    Stack: shadcnComponentDefinitions.Stack,

    // Custom
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.string(),
        trend: z.enum(["up", "down", "neutral"]).nullable(),
      }),
      description: "KPI metric display",
    },
  },
  actions: {},
});

const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Stack: shadcnComponents.Stack,
    Metric: ({ props }) => <div>{props.label}: {props.value}</div>,
  },
});

使用可能なコンポーネント

レイアウト

• Card - タイトル、説明、最大幅、中央揃えを任意で指定できるコンテナー
• Stack - 方向、間隔、配置、整列を指定できるフレックスコンテナー
• Grid - 列数（数値）と間隔を指定するグリッドレイアウト
• Separator - 向きを指定できる視覚的な区切り線

ナビゲーション

• Tabs - タブ配列、デフォルト値、値を指定できるタブナビゲーション
• Accordion - 項目配列とタイプ（単一／複数）を指定できる折りたたみ可能なセクション
• Collapsible - タイトル付きの単一の折りたたみ可能なセクション
• Pagination - 総ページ数とページを指定できるページナビゲーション

オーバーレイ

• Dialog - タイトル、説明、openPath を指定できるモーダルダイアログ
• Drawer - タイトル、説明、openPath を指定できる下部ドロワー
• Tooltip - コンテンツとテキストを指定できる、ホバー時に表示されるツールチップ
• Popover - トリガーとコンテンツを指定できる、クリックで表示されるポップオーバー
• DropdownMenu - ラベルと項目配列を指定できるドロップダウン

コンテンツ

• Heading - レベル（h1～h4）を指定できる見出しテキスト
• Text - バリアント（body、caption、muted、lead、code）を指定できる段落
• Image - alt、幅、高さを指定できる画像
• Avatar - src、名前、サイズを指定できるユーザーアバター
• Badge - テキストとバリアント（default、secondary、destructive、outline）を指定できるステータスバッジ
• Alert - タイトル、メッセージ、タイプ（success、warning、info、error）を指定できるアラートバナー
• Carousel - 項目配列を指定できるスクロール可能なカルーセル
• Table - 列（string[]）と行（string[][]）を指定できるデータテーブル

フィードバック

• Progress - 値、最大値、ラベルを指定できるプログレスバー
• Skeleton - 幅、高さ、角丸を指定できる読み込みプレースホルダー
• Spinner - サイズとラベルを指定できる読み込みスピナー

入力

• Button - ラベル、バリアント（primary、secondary、danger）、無効状態を指定できるボタン
• Link - ラベルと href を指定できるアンカーリンク
• Input - ラベル、名前、タイプ、プレースホルダー、値、checks を指定できるテキスト入力
• Textarea - ラベル、名前、プレースホルダー、行数、値、checks を指定できる複数行入力
• Select - ラベル、名前、選択肢（string[]）、値、checks を指定できるドロップダウン選択
• Checkbox - ラベル、名前、チェック状態、checks、validateOn を指定できるチェックボックス
• Radio - ラベル、名前、選択肢（string[]）、値、checks、validateOn を指定できるラジオグループ
• Switch - ラベル、名前、チェック状態、checks、validateOn を指定できるトグルスイッチ
• Slider - ラベル、最小値、最大値、ステップ、値を指定できる範囲スライダー
• Toggle - ラベル、押下状態、バリアントを指定できるトグルボタン
• ToggleGroup - 項目、タイプ、値を指定できるトグルのグループ
• ButtonGroup - ボタン配列と選択状態を指定できるボタングループ

組み込みアクション（@json-render/react から）

これらは React スキーマに組み込まれており、ActionProvider によって自動的に処理されます。カタログで宣言しなくても、プロンプトに表示されます。

• setState - 状態パスに値を設定します（{ statePath, value }）
• pushState - 配列に値を追加します（{ statePath, value, clearStatePath? }）
• removeState - インデックスを指定して配列項目を削除します（{ statePath, index }）
• validateForm - すべてのフィールドを検証し、{ valid, errors } を状態に書き込みます（{ statePath? }）

検証のタイミング（validateOn）

すべてのフォームコンポーネントでは、検証が実行されるタイミングを制御するためにvalidateOnをサポートしています。

• "change" — 入力が変更されるたびに検証します（Select、Checkbox、Radio、Switch のデフォルト）
• "blur" — フィールドのフォーカスが外れたときに検証します（Input、Textarea のデフォルト）
• "submit" — フォームの送信時にのみ検証します

重要な注意事項

• /catalogエントリーポイントにはReactの依存関係がありません。サーバーサイドでのプロンプト生成に使用してください
• コンポーネントはTailwind CSSクラスを使用するため、アプリでTailwindを設定する必要があります
• コンポーネントの実装では、アプリのcomponents/ui/ではなく、バンドルされたshadcn/uiプリミティブを使用します
• すべてのフォーム入力は、検証用のchecks（typeとmessageのペア）と、タイミング用のvalidateOnをサポートしています
• イベント：入力はchange／submit／focus／blurを発行し、ボタンはpressを発行し、セレクトはchange／selectを発行します