Radix UI

Radix UI is a low-level UI component library focused on accessibility and customization. It provides unstyled primitive components that give developers complete design freedom while ensuring WAI-ARIA compliant, accessible UIs. With over 30 components including Dialog, Dropdown, and Tooltip, each can be installed independently for incremental adoption.

modal

accessibilityheadless-uiunstyledprimitivesdesign-system

🎮 Playground

import React from 'react';

// radix-ui 라이브러리 예제
// 자동 생성에 실패하여 기본 템플릿이 표시됩니다.

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      fontFamily: 'system-ui, sans-serif',
      maxWidth: '600px',
      margin: '0 auto'
    }}>
      <h1 style={{ marginBottom: '1rem' }}>radix-ui</h1>
      <p style={{ color: '#666', marginBottom: '1.5rem' }}>
        이 라이브러리의 인터랙티브 예제를 준비 중입니다.
      </p>
      <pre style={{ 
        background: '#f4f4f4', 
        padding: '1rem', 
        borderRadius: '8px',
        overflow: 'auto'
      }}>
        npm install @radix-ui/react-dialog
      </pre>
      <p style={{ marginTop: '1.5rem', fontSize: '0.9rem' }}>
        <a 
          href={`https://www.npmjs.com/package/@radix-ui/react-dialog`}
          target="_blank"
          rel="noopener noreferrer"
          style={{ color: '#0070f3' }}
        >
          npm에서 자세한 문서 보기 →
        </a>
      </p>
    </div>
  );
}

Loading playground...

Use cases

•Building design systems with accessibility-guaranteed base component layers
•Developing fully customized UI libraries with Tailwind CSS or CSS-in-JS solutions
•Incrementally adding accessible Dialog, Dropdown, Popover components to existing projects
•Enterprise-grade web applications requiring complex interactions (modals, menus, tooltips)
•Developing government or financial websites where WCAG compliance is mandatory

Good for

✓Fully WAI-ARIA compliant with built-in accessibility features like keyboard navigation and screen reader support
✓Unstyled headless components compatible with any styling solution including CSS-in-JS, Tailwind, and CSS Modules
✓Individual package distribution enables bundle size optimization and incremental adoption
✓Written in TypeScript with excellent type safety and flexible API supporting both controlled and uncontrolled patterns
✓Backed by WorkOS with active community ensuring continuous maintenance and updates

Not good for

✗No built-in styling requires initial setup time, making it better suited for long-term projects than rapid prototyping
✗Low-level API has a learning curve requiring understanding of component composition and accessibility patterns
✗Multiple internal dependencies (@radix-ui/react-* packages) can result in a complex dependency tree

Installation

$ npm install @radix-ui/react-dialog

Example

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

export default function Demo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
          <Dialog.Description>Description</Dialog.Description>
          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

Comparison

"More accessible than Headless UI, more flexible than Chakra UI."

Trust Metrics

18.5K

GitHub Stars

18.8M

Weekly Downloads

Last Commit:Feb 13, 2026

Used by

LinearVercelCodesandbox

View on GitHub View on npm