shadcn-svelte

@json-render/shadcn-svelte

json-render 用の、事前構築済みの shadcn-svelte コンポーネント定義と実装です。Svelte 5 + Tailwind CSS 上に構築された 36 個のコンポーネントを提供します。

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

エントリーポイント	エクスポート	用途
@json-render/shadcn-svelte/catalog	shadcnComponentDefinitions	カタログスキーマ（Svelte への依存なし、サーバーでも安全）
@json-render/shadcn-svelte	shadcnComponents, shadcnComponentDefinitions	Svelte の実装 + カタログスキーマ

使用パターン

標準の定義から必要なコンポーネントを選択します。すべての定義をスプレッドしないでください。アプリで使うものを明示的に選択します。

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

// 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,
  },
});

次に、Svelte コンポーネントでレンダリングします。

<script lang="ts">
  import { Renderer, JsonUIProvider } from "@json-render/svelte";

  export let spec;
  export let registry;
</script>

<JsonUIProvider initialState={spec?.state ?? {}}>
  <Renderer {spec} {registry} />
</JsonUIProvider>

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

レイアウト

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

ナビゲーション

• Tabs - tabs 配列、defaultValue、value を指定できるタブナビゲーション
• Accordion - items 配列と type（single/multiple）を指定できる折りたたみセクション
• Collapsible - タイトルを指定できる単一の折りたたみセクション
• Pagination - totalPages と page を指定できるページナビゲーション

オーバーレイ

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

コンテンツ

• Heading - レベル（h1-h4）を指定できる見出しテキスト
• Text - variant（body、caption、muted、lead、code）を指定できる段落
• Image - alt、width、height を指定できる画像
• Avatar - src、name、size を指定できるユーザーアバター
• Badge - テキストと variant（default、secondary、destructive、outline）を指定できるステータスバッジ
• Alert - タイトル、メッセージ、type（success、warning、info、error）を指定できるアラートバナー
• Carousel - items 配列を指定できるスクロール可能なカルーセル
• Table - columns（string[]）と rows（string[][]）を指定できるデータテーブル

フィードバック

• Progress - value、max、label を指定できるプログレスバー
• Skeleton - width、height、rounded を指定できる読み込み中のプレースホルダー
• Spinner - size と label を指定できる読み込みスピナー

入力

• Button - label、variant（primary、secondary、danger）、disabled を指定できるボタン
• Link - label と href を指定できるアンカーリンク
• Input - label、name、type、placeholder、value、checks を指定できるテキスト入力
• Textarea - label、name、placeholder、rows、value、checks を指定できる複数行入力
• Select - label、name、options（string[]）、value、checks を指定できるドロップダウン選択
• Checkbox - label、name、checked、checks、validateOn を指定できるチェックボックス
• Radio - label、name、options（string[]）、value、checks、validateOn を指定できるラジオグループ
• Switch - label、name、checked、checks、validateOn を指定できるトグルスイッチ
• Slider - label、min、max、step、value を指定できる範囲スライダー
• Toggle - label、pressed、variant を指定できるトグルボタン
• ToggleGroup - items、type、value を指定できるトグルのグループ
• ButtonGroup - buttons 配列と selected を指定できるボタングループ

バリデーションのタイミング（validateOn）

すべてのフォームコンポーネントで validateOn を指定して、バリデーションを実行するタイミングを制御できます。

• "change" -- 入力が変更されるたびにバリデーションを実行します（Select、Checkbox、Radio、Switch のデフォルト）
• "blur" -- フィールドからフォーカスが外れたときにバリデーションを実行します（Input、Textarea のデフォルト）
• "submit" -- フォーム送信時にのみバリデーションを実行します

重要な注意事項

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