Radix UI - Quick Reference

When to Use This Skill

• Accessible Dialog/Modal components
• Dropdown menu, Select, Popover
• Headless components to style with Tailwind

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: radix-ui for comprehensive documentation.

When NOT to Use This Skill

• shadcn/ui project - Use shadcn-ui skill for pre-styled components
• Need styled components - Use Material-UI, Chakra UI, Ant Design
• Vue/Svelte projects - Use Headless UI or framework-specific libraries
• Simple use cases - Native HTML elements might suffice

Essential Patterns

Dialog (Modal)

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

<Dialog.Root>
  <Dialog.Trigger asChild>
    <button>Open</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">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>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';

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <button>Menu</button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content className="bg-white shadow-lg rounded p-2">
      <DropdownMenu.Item onSelect={() => handleEdit()}>
        Edit
      </DropdownMenu.Item>
      <DropdownMenu.Item onSelect={() => handleDelete()}>
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

Select

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

<Select.Root value={value} onValueChange={setValue}>
  <Select.Trigger className="select-trigger">
    <Select.Value placeholder="Select..." />
  </Select.Trigger>
  <Select.Portal>
    <Select.Content>
      <Select.Viewport>
        <Select.Item value="admin">
          <Select.ItemText>Admin</Select.ItemText>
        </Select.Item>
      </Select.Viewport>
    </Select.Content>
  </Select.Portal>
</Select.Root>

Controlled State

const [open, setOpen] = useState(false);
<Dialog.Root open={open} onOpenChange={setOpen}>

Common Props

Anti-Patterns to Avoid

• Do not forget Portal for z-index
• Do not forget asChild to avoid wrapper divs
• Do not neglect accessibility (ARIA labels)

Anti-Patterns

Quick Troubleshooting

Further Reading

For complete API reference: Radix UI Docs