Custom UI Components with Radix UI: Accessibility & Styling
We often face the task: create custom UI components that work with a keyboard, are correctly announced to screen readers, and still look unique. Ready-made UI libraries (Material UI, Ant Design) impose their own styles, while writing everything from scratch is time-consuming and prone to accessibility errors. Radix UI solves this problem: headless primitives with correct semantics, focus, and ARIA, while the appearance remains with the developer. Our experience of over 5 years in creating React interfaces confirms: Radix UI is the best choice for projects where accessibility and customization matter.
Why Radix UI is the Best Choice for Accessible Interfaces
Unlike traditional UI libraries, Radix UI does not impose styles. You get ready-made logic: focus management, keyboard navigation, ARIA attributes, and states. For example, Dialog automatically traps focus inside, closes on Escape, and blocks page scrolling — all without a single line of JavaScript. Compare that to a typical modal implementation: you need to manually handle focus trap, scroll lock, and animations. Radix UI reduces development time for such components by 3–5 times.
How Radix UI Simplifies Component Customization
Each Radix primitive consists of parts (Anatomy). You style each part independently via CSS classes or Tailwind. For example, <Dialog.Content> can have custom padding, background, and animation — without overriding built-in styles because there are none. This gives complete design freedom and speeds up layout.
What are Headless Primitives and Why Use Them?
Headless primitives are components without built-in styles that provide only logic (states, events, accessibility). This allows the developer to fully control the appearance without sacrificing correct semantics. Radix UI implements WAI-ARIA patterns, so your interfaces will be accessible to people with disabilities without extra effort. For example, when using Select from Radix, the screen reader automatically announces the selected item and the number of options.
Installation and Usage
npm install @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-dropdown-menu import * as Dialog from '@radix-ui/react-dialog'; function Modal() { return ( <Dialog.Root> <Dialog.Trigger asChild> <button className="btn-primary">Open</button> </Dialog.Trigger> <Dialog.Portal> <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" /> <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 w-full max-w-md shadow-xl focus:outline-none"> <Dialog.Title className="text-xl font-semibold">Title</Dialog.Title> <Dialog.Description className="mt-2 text-gray-600"> Dialog description. </Dialog.Description> <Dialog.Close asChild> <button className="absolute top-4 right-4" aria-label="Close"> ✕ </button> </Dialog.Close> </Dialog.Content> </Dialog.Portal> </Dialog.Root> ); } Styling States via data-attributes
Radix sets data-state attributes to manage states: open/closed, active/inactive, etc. They can be used in CSS for animation or via the tailwindcss-radix plugin in Tailwind.
[data-state="open"] .dialog-overlay { animation: fadeIn 150ms ease; } [data-state="closed"] .dialog-overlay { animation: fadeOut 150ms ease; } [data-state="open"] .select-trigger { border-color: #2563eb; } With Tailwind — via plugin:
<Select.Trigger className="data-[state=open]:border-blue-500 data-[placeholder]:text-gray-400" /> Accessibility - What You Get for Free
- Focus trap: in Dialog and Popover, focus automatically moves inside and does not escape.
- Escape to close: Dialog, Popover, Select close on Escape.
- Scroll lock: when Dialog is open, the page does not scroll.
- ARIA: automatic
aria-haspopup,aria-expanded,aria-controls,role. - Keyboard navigation: in Select, Menu, RadioGroup — arrows + Home/End.
Radix Primitives Components
| Category | Components |
|---|---|
| Overlay | Dialog, AlertDialog, Sheet |
| Menu | Select, DropdownMenu, ContextMenu, NavigationMenu |
| Popover | Tooltip, Popover, HoverCard |
| Layout | Accordion, Tabs, Collapsible |
| Form | Checkbox, RadioGroup, Switch, Slider |
| Other | Progress, ScrollArea, Separator, Avatar, AspectRatio |
Comparison: Radix UI vs Material UI
| Parameter | Radix UI | Material UI |
|---|---|---|
| Customization | Full (no styles) | Limited (theming) |
| Bundle size | ~5 kB (tree-shaked) | ~100 kB (with theming) |
| Accessibility | WAI-ARIA by default | Requires manual setup |
| Modal development time | 2–3 hours | 4–6 hours (with customization) |
| SSR/Next.js support | Full | Full |
Shadcn/ui - An Overlay on Radix
Shadcn/ui provides ready-made styled components based on Radix + Tailwind. Unlike regular UI libraries — components are copied into the project (npx shadcn-ui add button), not imported as a dependency. Full freedom to modify. This saves up to 40% additional time on initial setup.
Additional info: how to choose between Radix and Shadcn/ui
If you need full control over every line of code — choose Radix. If you want to get a ready but easily customizable UI right away — use Shadcn/ui. Both options provide excellent accessibility and performance.Project Workflow with Radix UI
- Analysis of accessibility and design requirements.
- Selection of Radix primitives set.
- Custom styling (Tailwind/CSS).
- Integration with form or routing.
- Keyboard and screen reader testing.
- Deployment and Core Web Vitals optimization.
Estimated Timelines
Implementation of a UI component set (modal, dropdown, select, tabs, form) using Radix UI + custom styles: from 3 to 5 days depending on the number and complexity of components. The cost is calculated individually. We will evaluate your project for free — just write to us.
We guarantee full accessibility according to WCAG 2.1 standards and support for all modern browsers. Our team of certified React developers has over 5 years of experience and has completed more than 100 projects with Radix UI. Order Radix UI interface development today — get a consultation from our specialist. Contact us to discuss details.