Rad UIOpen source React components

Accessible by default. Styled your way.

60+ React components with keyboard support, focus management and ARIA built in. Use the Clarity theme, retheme it with tokens, or drop it and style every state yourself.

Get started Browse components GitHub

pnpm add @radui/ui

Accent

Radius

Acme workspace

acme.dev · 12 members

Pro

Default role

Density

CompactComfortable

Session timeout

30 min

Require two-factor authentication

Change the accent, radius or appearance. Every control here is a Rad UI component.

Headless at the core

Keep the behavior. Swap the look.

Rad UI owns roles, ARIA, focus and keyboard handling. Styling is opt-in: the Clarity theme hooks into generated classes, and every state is a stable data-* attribute you can target from any CSS.

Auto-sync

Email me a summary

Volume

Setup

import "@radui/ui/themes/default.css"

<Theme classNamespace="rad-ui">
  <App />
</Theme>

The optional Clarity stylesheet targets generated rad-ui-* classes.

Live DOM

Accessibility

Keyboard and screen readers, handled.

Composite widgets follow WAI-ARIA patterns: one tab stop per group, arrow keys inside it, Home and End to jump. Roles and states stay in sync as you move.

HobbyTeamEnterprise

Tab stops

1. Toggle group
2. Toggle group
3. Tabs
4. Radio group
5. Slider

Five widgets, five tab stops. Arrow keys move inside each one.

Focused element

Click or tab into any control, then use the arrow keys, Home, End and Space.

Keys

Components

The hard ones, already done.

Focus trapping, outside-click dismissal, collision-aware positioning and live-region announcements ship with the component. Open a few.

Dialog

Focus trap and restore

Dropdown menu

Arrows, typeahead, Escape

Combobox

Searchable, filterable listbox

Toast

Stacked, announced, dismissible

Tooltip

Opens on hover and focus

Popover

Positioned with collision handling

Yes. IDs and data attributes are deterministic.

Accordion

Single or multiple panels

Number field

Clamped steps, arrow keys

See all 60+ components

Quick start

Install, import, compose.

pnpm add @radui/ui

One import per component: Pull in Dialog without paying for Table.
Server-rendering safe: Deterministic markup and data attributes for hydration.
Typed end to end: Every part and prop ships with TypeScript types.
React 18 and 19: Works with Next.js, Remix, Vite and friends.

components/EditProfile.tsx

import Button from "@radui/ui/Button"
import Dialog from "@radui/ui/Dialog"

export function EditProfile() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button>Edit profile</Button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Edit profile</Dialog.Title>
          <Dialog.Close asChild>
            <Button>Done</Button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

That snippet, running:

Documentation

Built for humans. Your agents will love it too.

Component pages are written by hand: props and defaults for each part, keyboard maps, the ARIA pattern it follows, and live examples with their source. Turns out that is exactly what an AI agent needs to get it right the first time.

For you

Reference you can actually read

Tabs.TriggerAPI reference

Tabs.Trigger props, from the Rad UI docs
Prop	Type	Default
className	string	--
children	ReactNode	required
disabled	boolean	false
value	string	--

Keyboard interactions

←→Move focus between triggers
HomeEndJump to the first or last trigger

ARIA references

Tabs patternTab list, trigger and panel semantics

See the full Tabs page

For your agent

One file to read the whole library

curl -s https://www.rad-ui.com/llms.txt

# Rad UI> Rad UI is a modern, headless React component library focused on accessibility, TypeScript, and unstyled primitives for building custom design systems.…## Components- [Accordion](https://www.rad-ui.com/docs/components/accordion)- [AlertDialog](https://www.rad-ui.com/docs/components/alert-dialog)- [AspectRatio](https://www.rad-ui.com/docs/components/aspect-ratio)- [Avatar](https://www.rad-ui.com/docs/components/avatar)  … 61 more## Guides- [Accessibility](https://www.rad-ui.com/docs/guides/accessibility)- [Styling & Customization](https://www.rad-ui.com/docs/guides/styling-and-customization)  … 19 more

Regenerated from the docs navigation on every build, so your agent reads the pages that exist today, not a stale crawl. Hand the link to Claude, Cursor or Copilot and it can reach any component page or guide in one hop.

Open llms.txt

component pages: 65
in-depth guides: 21
pages indexed in llms.txt: 108

Every part, every prop
API tables list each part with its props, types and defaults, beside an anatomy snippet you can copy.
Keyboard and ARIA, written down
Interactive components document their key bindings and link the WAI-ARIA pattern they follow.
Examples with their source
Live demos render next to the exact code and theme styles that produce them.
Predictable by design
Consistent Root and part naming, TypeScript types, and stable data-* state attributes. Guess once, guess right.

Ship the behavior. Keep your design.

Start with one component and grow into a design system, without a theme to fight along the way.

Read the docs See it in real apps