i-Willink
Design SystemDocs
ドキュメントメニュー

ブロック一覧

@willink レジストリで 配布している copy-to-own 項目の一覧です。追加方法は レジストリの使い方 を参照してください。 この一覧はライブレジストリ（r/registry.json）と対応します。

どのブロックも、追加時に npm の @willink-labs/react + @willink-labs/tailwind-preset を自動導入し、ブロックのソースをあなたのリポジトリにコピーします。primitives は npm パッケージから入るため再ベンダリングされず、consumer の --color-brand 1 行で ブロックも一緒に再テーマされます。

追加は npx shadcn add @willink/<ブロック名> です。

bash
npx shadcn add @willink/pricing-card

ユーティリティ

  • cn — clsx + tailwind-merge のクラス結合ヘルパー（registry:lib・全ブロックが依存し、ブロック追加時に自動で入ります）

フォーム

  • contact-form — お問い合わせフォーム（FormField + Input + Textarea + Button）
  • auth-form — サインインフォーム（FormField + Input + Checkbox + Button + Separator）
  • settings-form — 設定画面（Tabs + Card + Switch + Select + RadioGroup・保存フッター付き）
  • subscribe-inline — インライン購読（FormField + Input + Button + Alert）
  • newsletter-signup — ニュースレター登録カード（Card + FormField + Checkbox + toast・同意チェック付き）

マーケティング / ランディング

  • page-hero — 中央寄せヒーロー（Badge + Button）
  • cta-section — 末尾の CTA バンド（Badge + Button）
  • feature-grid — 機能グリッド（Card + Badge）
  • pricing-card — 料金プランカード（Card + Badge + Button）
  • comparison-table — プラン比較表（Table + ToggleGroup + HoverCard + Badge・月額/年額トグル）
  • logo-cloud — 導入企業ロゴの帯（ScrollArea + Avatar + Skeleton + Tooltip）

ソーシャルプルーフ & コンテンツ

  • faq — FAQ アコーディオン（Accordion・1 つだけ開く collapsible Q&A）
  • testimonial — お客様の声カード（Card + Avatar・figure/figcaption 帰属）
  • testimonial-wall — 複数引用のウォール（Card + Avatar + Badge・masonry）
  • team-grid — チーム紹介グリッド（Card + Avatar + HoverCard + Badge）
  • article-card — 記事プレビューカード（Card + Avatar + Badge + Button）

アプリ / ダッシュボード

  • page-header — ページヘッダー（Breadcrumb + Badge + ButtonGroup + Button + DropdownMenu）
  • dashboard-shell — レスポンシブなアプリシェル（Sheet + ScrollArea + Avatar + DropdownMenu・サイドバー + トップバー）
  • command-palette — ⌘K コマンドパレット（Command + Dialog）
  • confirm-dialog — 破壊的操作の確認ダイアログ（AlertDialog + Button）

データ表示

  • data-table — 管理テーブル（Table + Checkbox + DropdownMenu + Pagination + Empty・行選択 + ページング）
  • stats — 指標の行（Card・ラベル/値/増減の dl グリッド）
  • stat-highlight — KPI ハイライトカード（Card + Progress + Badge）
  • description-list — メタデータ readout（Card + Separator + Badge + Tooltip + Collapsible・dl）
  • range-filter — 範囲フィルタ（Popover + Slider + Badge + Button）

プレビューは Storybook カタログ（primitives）と各ブロックのソースを参照してください。