Radix Primitives — Anatomy & Accessibility

Radix gives you behavior, not looks. These re-create a Radix Dialog and DropdownMenu — focus trap, Esc, arrow keys, data-state — all unstyled by default, styled here with "Tailwind".

1 · Dialog — focus trap + Esc + overlay

Open it, then press Tab repeatedly — focus is trapped inside. Press Esc or click the backdrop to close. On close, focus returns to the trigger.

// Radix composition — you assemble the parts <Dialog.Root> <Dialog.Trigger /> // the button <Dialog.Portal> // renders outside the DOM tree <Dialog.Overlay /> // backdrop, data-state <Dialog.Content> // focus-trapped, role="dialog" <Dialog.Title /> <Dialog.Description /> <Dialog.Close /> </Dialog.Content> </Dialog.Portal> </Dialog.Root>

2 · DropdownMenu — keyboard navigation

Open with click or Enter. Use ↑/↓ to move, Enter to pick, Esc to close. Roving focus and aria- wiring are handled for you.

What Radix gives you for free: focus management & trapping, return-focus, Esc/outside-click to dismiss, full keyboard navigation, correct ARIA roles & relationships, portal rendering, and data-state hooks for animation. You only write the styles.