radix-primitives

Radix Primitives

高品質なデザインシステムを構築するための、スタイル未設定でアクセシブルな React コンポーネントです。

概要

• アクセシビリティを完全に備えた、独自のスタイル付きコンポーネントの構築
• shadcn/ui の内部動作の理解
• ラッパーの div を使わないポリモーフィックな合成
• 複雑な UI パターン（モーダル、メニュー、ツールチップ）の実装

プリミティブ一覧

オーバーレイコンポーネント

プリミティブ	用途
Dialog	モーダルダイアログ、フォーム、確認
AlertDialog	破壊的な操作の確認
Sheet	サイドパネル、モバイルドロワー

ポップオーバーコンポーネント

プリミティブ	用途
Popover	トリガーに連動するリッチコンテンツ
Tooltip	簡単なテキストヒント
HoverCard	ホバー時のプレビューカード
ContextMenu	右クリックメニュー

メニューコンポーネント

プリミティブ	用途
DropdownMenu	アクションメニュー
Menubar	アプリケーションのメニューバー
NavigationMenu	サイトナビゲーション

フォームコンポーネント

プリミティブ	用途
Select	カスタムのセレクトドロップダウン
RadioGroup	単一選択グループ
Checkbox	真偽値の切り替え
Switch	オン／オフの切り替え
Slider	範囲の選択

開閉コンポーネント

プリミティブ	用途
Accordion	展開可能なセクション
Collapsible	単一の切り替えコンテンツ
Tabs	タブ付きインターフェース

コアパターン：asChild

asChild プロパティを使うと、ラッパーの div を使わずにポリモーフィックなレンダリングができます。

// Without asChild - creates nested elements
<Button>
  <Link href="/about">About</Link>
</Button>

// With asChild - merges into single element
<Button asChild>
  <Link href="/about">About</Link>
</Button>

仕組み：

• Radix 内部の Slot コンポーネントを使用します
• 親から子へプロパティをマージします
• ref を正しく転送します
• イベントハンドラーを結合します（両方が実行されます）
• classNames をマージします

組み込みのアクセシビリティ

すべてのプリミティブに次の機能が含まれています。

• キーボード操作：矢印キー、Escape、Enter、Tab
• フォーカス管理：フォーカスのトラップ、復帰、視認可能なフォーカスリング
• ARIA 属性：ロール、状態、プロパティ
• スクリーンリーダー：適切な読み上げ

データ属性を使ったスタイリング

Radix はデータ属性を使って状態を公開します。

/* Style based on state */
[data-state="open"] { /* open styles */ }
[data-state="closed"] { /* closed styles */ }
[data-disabled] { /* disabled styles */ }
[data-highlighted] { /* keyboard focus */ }

// Tailwind arbitrary variants
<Dialog.Content className="data-[state=open]:animate-in data-[state=closed]:animate-out">

クイックリファレンス

import { Dialog, DropdownMenu, Tooltip } from 'radix-ui'

// Basic Dialog
<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

主な判断事項

判断事項	推奨事項
スタイリング方法	データ属性 + Tailwind の任意バリアント
合成	ラッパーの div を避けるには asChild を使用します
アニメーション	data-state セレクターを使った CSS のみのアニメーション
フォームコンポーネント	react-hook-form と組み合わせます

関連スキル

• shadcn-patterns - スタイル設定済みの Radix コンポーネント
• focus-management - アクセシビリティパターン
• design-system-starter - デザインシステムの基盤

参考資料

• asChild による合成 - ポリモーフィックなレンダリング
• Dialog パターン - Dialog と AlertDialog
• Dropdown パターン - メニューと Select
• Popover パターン - Popover と Tooltip
• フォーカス管理 - キーボード操作とフォーカス