Radix UI：Claude Code 实战指南

Radix UIでアクセシブルなUIを构建する

Radix UIはアクセシビリティに優れたヘッドレスUI组件库です。样式を持たないため、自由にデザインを適用でき、WAI-ARIAパターンに準拠したインタラクションが自動で实现されます。Claude Code 组件の組み立てからスタイリングまで一貫してサポートします。

对话框（模态框）の实现

让 Claude Codeアクセシブルな模态框を依頼吧。

> Radix UIのDialogで确认模态框を作って。
> Tailwind CSSでスタイリング、动画付きで。

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

interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  onConfirm: () => void;
  confirmLabel?: string;
  variant?: "danger" | "default";
}

function ConfirmDialog({
  open,
  onOpenChange,
  title,
  description,
  onConfirm,
  confirmLabel = "確認",
  variant = "default",
}: ConfirmDialogProps) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-fadeIn" />
        <Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 w-full max-w-md shadow-xl data-[state=open]:animate-slideUp">
          <Dialog.Title className="text-lg font-semibold">
            {title}
          </Dialog.Title>
          <Dialog.Description className="mt-2 text-gray-600">
            {description}
          </Dialog.Description>

          <div className="mt-6 flex justify-end gap-3">
            <Dialog.Close asChild>
              <button className="px-4 py-2 rounded bg-gray-100 hover:bg-gray-200">
                キャンセル
              </button>
            </Dialog.Close>
            <button
              onClick={() => {
                onConfirm();
                onOpenChange(false);
              }}
              className={`px-4 py-2 rounded text-white ${
                variant === "danger"
                  ? "bg-red-500 hover:bg-red-600"
                  : "bg-blue-500 hover:bg-blue-600"
              }`}
            >
              {confirmLabel}
            </button>
          </div>

          <Dialog.Close asChild>
            <button
              className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
              aria-label="Close"
            >
              ✕
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

下拉菜单

キーボード导航完備の下拉です。

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

function UserMenu({ user }: { user: User }) {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100">
          <img
            src={user.avatar}
            alt={user.name}
            className="w-8 h-8 rounded-full"
          />
          <span>{user.name}</span>
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content
          className="min-w-[200px] bg-white rounded-lg shadow-lg border p-1"
          sideOffset={5}
          align="end"
        >
          <DropdownMenu.Label className="px-3 py-2 text-sm text-gray-500">
            {user.email}
          </DropdownMenu.Label>
          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />

          <DropdownMenu.Item className="px-3 py-2 text-sm rounded cursor-pointer hover:bg-blue-50 hover:text-blue-600 outline-none">
            プロフィール
          </DropdownMenu.Item>
          <DropdownMenu.Item className="px-3 py-2 text-sm rounded cursor-pointer hover:bg-blue-50 hover:text-blue-600 outline-none">
            設定
          </DropdownMenu.Item>

          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className="px-3 py-2 text-sm rounded cursor-pointer hover:bg-blue-50 outline-none flex justify-between">
              テーマ
              <span>▸</span>
            </DropdownMenu.SubTrigger>
            <DropdownMenu.Portal>
              <DropdownMenu.SubContent className="min-w-[150px] bg-white rounded-lg shadow-lg border p-1">
                <DropdownMenu.RadioGroup value="light">
                  <DropdownMenu.RadioItem value="light" className="px-3 py-2 text-sm rounded hover:bg-blue-50 outline-none">
                    ライト
                  </DropdownMenu.RadioItem>
                  <DropdownMenu.RadioItem value="dark" className="px-3 py-2 text-sm rounded hover:bg-blue-50 outline-none">
                    ダーク
                  </DropdownMenu.RadioItem>
                  <DropdownMenu.RadioItem value="system" className="px-3 py-2 text-sm rounded hover:bg-blue-50 outline-none">
                    システム
                  </DropdownMenu.RadioItem>
                </DropdownMenu.RadioGroup>
              </DropdownMenu.SubContent>
            </DropdownMenu.Portal>
          </DropdownMenu.Sub>

          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />
          <DropdownMenu.Item className="px-3 py-2 text-sm rounded cursor-pointer hover:bg-red-50 text-red-600 outline-none">
            ログアウト
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

标签页组件

import * as Tabs from "@radix-ui/react-tabs";

function SettingsTabs() {
  return (
    <Tabs.Root defaultValue="general" className="w-full">
      <Tabs.List className="flex border-b" aria-label="設定">
        {["general", "security", "notifications"].map((tab) => (
          <Tabs.Trigger
            key={tab}
            value={tab}
            className="px-4 py-2 text-sm border-b-2 border-transparent data-[state=active]:border-blue-500 data-[state=active]:text-blue-600 hover:text-gray-700"
          >
            {tab === "general" && "一般"}
            {tab === "security" && "security"}
            {tab === "notifications" && "通知"}
          </Tabs.Trigger>
        ))}
      </Tabs.List>

      <Tabs.Content value="general" className="p-4">
        <h3 className="text-lg font-medium">一般設定</h3>
        {/* 一般設定のフォーム */}
      </Tabs.Content>
      <Tabs.Content value="security" className="p-4">
        <h3 className="text-lg font-medium">セキュリティ設定</h3>
        {/* セキュリティ設定のフォーム */}
      </Tabs.Content>
      <Tabs.Content value="notifications" className="p-4">
        <h3 className="text-lg font-medium">通知設定</h3>
        {/* 通知設定のフォーム */}
      </Tabs.Content>
    </Tabs.Root>
  );
}

工具提示とポップオーバー

import * as Tooltip from "@radix-ui/react-tooltip";

function IconButton({ icon, label }: { icon: React.ReactNode; label: string }) {
  return (
    <Tooltip.Provider delayDuration={300}>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button className="p-2 rounded hover:bg-gray-100" aria-label={label}>
            {icon}
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            className="bg-gray-900 text-white text-xs px-3 py-1.5 rounded shadow-lg"
            sideOffset={5}
          >
            {label}
            <Tooltip.Arrow className="fill-gray-900" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
}

总结

Radix UIはアクセシビリティを犠牲にすることなく、自由度の高いUIを构建できる優れた库です。借助 Claude Code，每个组件の組み立てとスタイリングを快速实现可以。

Radix UIをベースにしたUI构建はshadcn/ui活用指南を、动画の添加はFramer Motion动画实现を、アクセシビリティの全般的な支持はアクセシビリティ实现指南。Radix UI官方文档也建议确认一下。