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공식 문서도 확인해 두세요.