Styling / UI & Animation
Radix UI
Unstyled, accessible primitives for dialogs, menus, and more.
Monthly cost
Free
Popularity
4/5
LLM knowledge
4/5
Difficulty
Medium
bundle: tree-shakeable
#open-source
What Radix UI is good at
Strengths
- +WAI-ARIA accessible
- +Unstyled — bring your own CSS
- +Composable
Tradeoffs
- −No styles included
- −Primitives only
Coding-agent prompt
Drop into Claude / Cursor to get idiomatic Radix UI code.
You're working with Radix UI. Unstyled, accessible primitives for dialogs, menus, and more. Best practices: - Lean on: wai-aria accessible - Lean on: unstyled — bring your own css - Lean on: composable Things to watch for: - Watch out for: no styles included - Watch out for: primitives only General guidance: - Canonical docs: https://www.radix-ui.com — check here before inventing APIs. - Keep secrets in environment variables, never commit them. - Write TypeScript where the ecosystem supports it; add types to every exported function. - Add tests for the critical paths before declaring the task done. - Read-the-docs is usually faster than guessing — cite the docs page in code comments when you apply a non-obvious pattern.
Beginner's guide to Radix UI
In one line: Accessible building blocks for components like dialogs and menus — you bring the styling.
Radix gives you the hard parts of complex components (keyboard navigation, accessibility) without any styling. You combine Radix with Tailwind or your own CSS.
Try it in your terminal
npm install @radix-ui/react-dialogInstall one primitive at a time, as you need them.
Popular pairings with Radix UI
Browse all categories