@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";

// カタログ: 定義を選択
const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Stack: shadcnComponentDefinitions.Stack,
    Heading: shadcnComponentDefinitions.Heading,
    Button: shadcnComponentDefinitions.Button,
    Input: shadcnComponentDefinitions.Input,
  },
  actions: {},
});

// レジストリ: マッチングする実装を選択
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 - direction、gap、align、justify を持つ Flex コンテナ
• Grid - columns (数値) と gap を持つグリッドレイアウト
• Separator - orientation を持つビジュアル区切り線

ナビゲーション

• Tabs - tabs 配列、defaultValue、value を持つタブ付きナビゲーション
• Accordion - items 配列と type (single/multiple) を持つ折りたたみ可能なセクション
• Collapsible - タイトルを持つ単一の折りたたみ可能セクション
• Pagination - totalPages と page を持つページナビゲーション

オーバーレイ

• Dialog - title、description、openPath を持つモーダルダイアログ
• Drawer - title、description、openPath を持つボトムドロワー
• Tooltip - content と text を持つホバーツールチップ
• Popover - trigger と content を持つクリック発動ポップオーバー
• DropdownMenu - label と items 配列を持つドロップダウン

コンテンツ

• Heading - level (h1-h4) を持つ見出しテキスト
• Text - variant (body, caption, muted, lead, code) を持つ段落
• Image - alt、width、height を持つ画像
• Avatar - src、name、size を持つユーザーアバター
• Badge - text と variant (default, secondary, destructive, outline) を持つステータスバッジ
• Alert - title、message、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 が設定されていることが必須です
• コンポーネント実装は bundled shadcn-svelte プリミティブを使用します (アプリの $lib/components/ui/ ではありません)
• すべてのフォーム入力は検証用の checks (type + message ペア) と タイミング用の validateOn をサポートします
• イベント: 入力は change/submit/focus/blur を発出; ボタンは press を発出; 選択は change/select を発出