Radix UI Primitives

Overview

Radix UI Primitives is the premier unstyled, headless UI component library for React, created by WorkOS. It provides uncompromised accessibility, robust state management, focus trapping, keyboard navigation, and modal layering—leaving 100% of the styling to you.

It serves as the battle-tested bedrock behind major design systems and UI collections across the web, including shadcn/ui.

Key Features

• 🧱 Completely Unstyled (Headless): Ships with zero default styling or CSS runtime overhead; style with Tailwind, CSS Modules, or CSS-in-JS.
• ♿️ Flawless WAI-ARIA Accessibility: Out-of-the-box keyboard interactions, roving tabindex, ARIA attribute binding, and screen reader announcements.
• 🛡️ Complex Micro-Interactions Handled: Modal nesting, portal management, collision-aware popover positioning, and body scroll lock.
• 🧩 Composable Architecture: Open, component-driven API with asChild polymorphic rendering patterns.

Installation & Quick Start

npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu

Accessible Dialog Example

import React from "react";
import * as Dialog from "@radix-ui/react-dialog";

export default function DialogDemo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="px-4 py-2 bg-black text-white rounded-lg">
        Open Dialog
      </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-xl shadow-xl">
          <Dialog.Title className="font-bold">Edit Profile</Dialog.Title>
          <Dialog.Description className="text-sm text-gray-500">
            Make changes to your profile details here.
          </Dialog.Description>
          <Dialog.Close className="mt-4 px-3 py-1.5 bg-gray-200 rounded">Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

When to Choose

• Ideal For: Teams building custom in-house design systems, accessible design tokens, or custom component kits with complete visual freedom.
• Alternatives: If you want ready-made visual designs without writing CSS from scratch, use shadcn/ui or HeroUI directly.