Building Accessible UI Components with Radix UI and Tailwind

The Problem Radix UI Solves

Building accessible interactive UI components from scratch is genuinely hard. A dropdown menu alone requires keyboard navigation (Arrow keys, Escape, Home, End), focus management, ARIA attributes (role='menu', aria-haspopup, aria-expanded), and screen reader announcements. Radix UI provides all of this as unstyled, fully accessible primitive components — you bring the visual design.

Radix UI Primitives Overview

Radix UI includes primitives for Dialog, Dropdown Menu, Select, Tabs, Accordion, Tooltip, Popover, Radio Group, Checkbox, Slider, Switch, and more. Each primitive is a separate npm package (@radix-ui/react-dialog, etc.). They are completely unstyled — they render the correct HTML elements with proper ARIA attributes and handle all keyboard interactions, but have no CSS by default.

Combining Radix with Tailwind CSS

Apply Tailwind classes directly to Radix component parts. Each Radix component exposes named sub-components (Dialog.Root, Dialog.Trigger, Dialog.Content, Dialog.Title, Dialog.Description, Dialog.Close) that you style individually. Radix provides data attributes (data-state='open', data-highlighted) that you can target with Tailwind's arbitrary variant: data-[state=open]:opacity-100 for enter/exit animations.

ShadCN UI: Radix + Tailwind Pre-Built

ShadCN UI is a collection of pre-built React components using Radix UI + Tailwind CSS. Rather than an npm package, ShadCN components are copied into your project with npx shadcn-ui@latest add button — you own the code. This means you can customize every pixel without fighting a library. For clients at abdur-razzak.site, ShadCN is my default UI toolkit for fast, accessible, and customizable component libraries.

Animation with Radix and Tailwind

Animate Radix components using Tailwind CSS animations triggered by Radix's data attributes. For Dialog, add animate-in fade-in-0 zoom-in-95 on Dialog.Content and data-[state=closed]:animate-out data-[state=closed]:fade-out-0 for the exit animation. Install tailwindcss-animate plugin for pre-built animation utilities. Radix handles the timing — it keeps the DOM element mounted during exit animations for smooth transitions.

Testing Radix Components

Test Radix components with React Testing Library using user interactions. Click trigger buttons with userEvent.click(), navigate with userEvent.keyboard('{ArrowDown}'), and assert that menu items are visible. Radix components that use portals (like Dialog and Tooltip) render to document.body by default — use screen.getByRole() to find them regardless of where they render in the DOM tree.