radix

<objective> Build accessible UI components using Radix UI primitives. Radix provides unstyled, accessible components that you style with Tailwind/CSS. </objective>

<mcp_first> CRITICAL: Fetch Radix UI documentation before implementing.

MCPSearch({ query: "select:mcp__plugin_devtools_context7__query-docs" })

// Radix primitives
mcp__context7__query_docs({
  libraryId: "/radix-ui/primitives",
  query: "How do I use Dialog with Trigger and Content?",
});

// Form controls
mcp__context7__query_docs({
  libraryId: "/radix-ui/primitives",
  query: "How do I use Select, Checkbox, and RadioGroup?",
});

// Accessibility
mcp__context7__query_docs({
  libraryId: "/radix-ui/primitives",
  query: "How do I handle accessibility, aria, and keyboard navigation?",
});

Note: Context7 v2 uses server-side filtering. Use descriptive natural language queries. </mcp_first>

<quick_start> Dialog:

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

function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Open Dialog</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg">
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>Dialog description.</Dialog.Description>
          <Dialog.Close asChild>
            <button>Close</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Dropdown Menu:

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

function MyDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button>Options</button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content className="bg-white rounded-md shadow-lg p-1">
          <DropdownMenu.Item className="px-2 py-1 cursor-pointer hover:bg-gray-100">
            Edit
          </DropdownMenu.Item>
          <DropdownMenu.Item className="px-2 py-1 cursor-pointer hover:bg-gray-100">
            Delete
          </DropdownMenu.Item>
          <DropdownMenu.Separator className="h-px bg-gray-200 my-1" />
          <DropdownMenu.Item className="px-2 py-1 cursor-pointer hover:bg-gray-100">
            Settings
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

Select:

import * as Select from "@radix-ui/react-select";

function MySelect() {
  return (
    <Select.Root>
      <Select.Trigger className="border px-3 py-2 rounded">
        <Select.Value placeholder="Select option" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Content className="bg-white border rounded shadow-lg">
          <Select.Viewport>
            <Select.Item value="1" className="px-3 py-2 hover:bg-gray-100">
              <Select.ItemText>Option 1</Select.ItemText>
            </Select.Item>
            <Select.Item value="2" className="px-3 py-2 hover:bg-gray-100">
              <Select.ItemText>Option 2</Select.ItemText>
            </Select.Item>
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}

</quick_start>

<common_components>

Component	Use Case
Dialog	Modals, confirmations
AlertDialog	Destructive action confirmations
DropdownMenu	Context menus, action menus
Select	Form select inputs
Popover	Floating content, tooltips
Tooltip	Hover hints
Tabs	Tabbed interfaces
Accordion	Collapsible sections
Checkbox	Boolean inputs
RadioGroup	Single selection
Switch	Toggle inputs
Slider	Range inputs
</common_components>

<patterns> **Controlled state:**

const [open, setOpen] = useState(false);

<Dialog.Root open={open} onOpenChange={setOpen}>
  {/* ... */}
</Dialog.Root>;

asChild pattern:

// Radix renders YOUR button, not its own
<Dialog.Trigger asChild>
  <Button variant="primary">Open</Button>
</Dialog.Trigger>

Portal for proper stacking:

<Dialog.Portal>
  <Dialog.Overlay />
  <Dialog.Content>{/* Content renders outside parent DOM */}</Dialog.Content>
</Dialog.Portal>

Forwarding refs:

const MyTrigger = forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    Custom Trigger
  </button>
));

<Dialog.Trigger asChild>
  <MyTrigger />
</Dialog.Trigger>;

</patterns> <constraints> **Required:** - Use `asChild` to compose with your own components - Use `Portal` for overlays/dropdowns - Provide accessible labels (Title, Description) - Handle keyboard navigation (built-in)

Accessibility:

• Always include Title for dialogs
• Use Description for additional context
• Test with keyboard navigation
• Test with screen readers </constraints>

<success_criteria>

• Context7 docs fetched for current API
• Uses asChild for custom triggers
• Portal used for floating content
• Accessible labels provided
• Styled with Tailwind (not inline) </success_criteria>