Expert assistance for building accessible components with Radix UI.
Capabilities
- Use Radix primitives
- Compose accessible components
- Style with CSS/Tailwind
- Handle complex interactions
- Implement WAI-ARIA patterns
Usage Pattern
import * as Dialog from '@radix-ui/react-dialog';
<Dialog.Root> <Dialog.Trigger asChild> Open </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>Title</Dialog.Title> <Dialog.Description>Description</Dialog.Description> <Dialog.Close asChild> Close </Dialog.Close> </Dialog.Content> </Dialog.Portal> </Dialog.Root>
## Target Processes
- component-library
- accessibility-implementation
- design-system