name	radix
description	Radix UI primitives for accessible React components. Covers dialogs, dropdowns, popovers, and form controls. Triggers on radix, Dialog, Popover, DropdownMenu.
triggers	radix, @radix-ui, Dialog, Popover, DropdownMenu, Select, Tooltip, Tabs

Build accessible UI components using Radix UI primitives. Radix provides unstyled, accessible components that you style with Tailwind/CSS. **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.

**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>
  );
}

| 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 | **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>;

**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

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

radix

Install Skill

SKILL.md