Radix UI は、アクセシビリティに優れた低レベル UI コンポーネントを提供するライブラリです。デザインに縛られることなく、Tailwind CSS などと自由に組み合わせて、自分のアプリに最適なスタイルで使えるのが特徴です。

特に Toast コンポーネントは有名ですが、それ以外にも実用的で拡張性の高いコンポーネントが数多く存在します。本記事では、実際のアプリにもすぐに導入できる Radix UI のおすすめコンポーネント3選をご紹介します。

1. Dialog（モーダルダイアログ）

🔗 公式ドキュメント

✅ 特徴

アクセシブルなモーダル
フォーカストラップや ESC クローズなど自動対応

サンプルコード：

import * as Dialog from "@radix-ui/react-dialog";

export function ExampleDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="btn">設定を開く</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed top-1/2 left-1/2 bg-white p-6 rounded shadow transform -translate-x-1/2 -translate-y-1/2">
          <Dialog.Title className="text-lg font-bold">設定</Dialog.Title>
          <Dialog.Description>ここでアプリの設定を変更できます</Dialog.Description>
          <button className="mt-4 btn">保存</button>
          <Dialog.Close className="absolute top-2 right-2">×</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

2. Dropdown Menu（ドロップダウン）

🔗 公式ドキュメント

✅ 特徴

コンテキストメニューやアカウントメニューなどに便利
キーボード操作に対応

サンプルコード：

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

export function UserMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger className="btn">メニュー</DropdownMenu.Trigger>
      <DropdownMenu.Content className="bg-white p-2 shadow rounded">
        <DropdownMenu.Item className="p-2 hover:bg-gray-100">プロフィール</DropdownMenu.Item>
        <DropdownMenu.Item className="p-2 hover:bg-gray-100">設定</DropdownMenu.Item>
        <DropdownMenu.Separator className="my-1 border-t" />
        <DropdownMenu.Item className="p-2 text-red-500 hover:bg-red-100">ログアウト</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

3. Switch（トグルスイッチ）

🔗 公式ドキュメント

✅ 特徴

テーマ切り替え、通知オンオフなどに最適
デザインを自由にカスタマイズ可能

サンプルコード：

import * as Switch from "@radix-ui/react-switch";

export function NotificationSwitch() {
  return (
    <label className="flex items-center space-x-2">
      <span>通知</span>
      <Switch.Root className="w-10 h-6 bg-gray-300 rounded-full relative">
        <Switch.Thumb className="block w-4 h-4 bg-white rounded-full translate-x-1 transition-transform data-[state=checked]:translate-x-5" />
      </Switch.Root>
    </label>
  );
}

✍️ ブログ記事に追加するならこんな感じで：

Radix UI の強力さは Toast に限らず、以下のような アクセシブルで柔軟な UI コンポーネントが揃っています：
Dialog: フォームや設定用のモーダル
DropdownMenu: ナビゲーションやユーザーメニュー
Switch: トグルで設定変更に便利
これらは WAI-ARIA に準拠し、キーボード操作にも完全対応。Tailwind CSS と組み合わせれば、デザインも統一しやすくなります。
Radix UI を導入することで、アプリの UI 品質を一段階引き上げられることは間違いありません。