> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.

# Radix UI Primitives

> Build high-quality, accessible design systems and web apps

<div className="relative overflow-hidden bg-gradient-to-br from-[#1c2424] via-[#2a3333] to-[#1c2424] dark:from-[#0f1117] dark:via-[#1a1d27] dark:to-[#0f1117] py-20">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white dark:text-gray-100 mb-6">
          Build accessible design systems with Radix UI Primitives
        </h1>

        <p className="text-lg sm:text-xl text-gray-300 dark:text-gray-400 max-w-2xl mb-8">
          An open-source UI component library providing unstyled, accessible components for building high-quality design systems and web apps in React.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/installation" className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-[#1c2424] dark:bg-[#1a1d27] hover:bg-[#2a3333] dark:hover:bg-[#242838] border border-white/20 dark:border-[#27272a] rounded-lg transition-colors no-underline">
            Get Started
          </a>

          <a href="/components/dialog" className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-white/10 hover:bg-white/20 border border-white/30 rounded-lg transition-colors no-underline">
            Browse Components
          </a>
        </div>
      </div>

      <div className="lg:col-span-5 hidden lg:block">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-[#1c2424]/50 to-transparent blur-3xl" />

          <div className="relative bg-[#0f1117]/80 dark:bg-[#1a1d27]/80 backdrop-blur border border-white/10 dark:border-[#27272a] rounded-2xl p-6">
            <pre className="text-sm text-gray-300 dark:text-gray-400 overflow-x-auto">
              <code>
                {`import * as Dialog from '@radix-ui/react-dialog';

                                <Dialog.Root>
                                <Dialog.Trigger>
                                  Open Dialog
                                </Dialog.Trigger>
                                <Dialog.Portal>
                                  <Dialog.Overlay />
                                  <Dialog.Content>
                                    <Dialog.Title>
                                      Welcome
                                    </Dialog.Title>
                                    <Dialog.Description>
                                      Accessible by default
                                    </Dialog.Description>
                                    <Dialog.Close />
                                  </Dialog.Content>
                                </Dialog.Portal>
                                </Dialog.Root>`}
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Quick Start
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Get up and running with Radix UI Primitives in minutes
  </p>

  <Steps>
    <Step title="Install a component">
      Install individual components from npm. Each component is a separate package.

      <CodeGroup>
        ```bash npm theme={null}
        npm install @radix-ui/react-dialog
        ```

        ```bash yarn theme={null}
        yarn add @radix-ui/react-dialog
        ```

        ```bash pnpm theme={null}
        pnpm add @radix-ui/react-dialog
        ```
      </CodeGroup>
    </Step>

    <Step title="Import and compose">
      Import the component parts and compose them together following the component's anatomy.

      ```tsx theme={null}
      import * as Dialog from '@radix-ui/react-dialog';

      export default function MyDialog() {
        return (
          <Dialog.Root>
            <Dialog.Trigger asChild>
              <button>Open Dialog</button>
            </Dialog.Trigger>
            <Dialog.Portal>
              <Dialog.Overlay className="dialog-overlay" />
              <Dialog.Content className="dialog-content">
                <Dialog.Title>Edit Profile</Dialog.Title>
                <Dialog.Description>
                  Make changes to your profile here.
                </Dialog.Description>
                {/* Your form or content */}
                <Dialog.Close asChild>
                  <button>Save changes</button>
                </Dialog.Close>
              </Dialog.Content>
            </Dialog.Portal>
          </Dialog.Root>
        );
      }
      ```
    </Step>

    <Step title="Style with any method">
      Components are unstyled by default. Style them with CSS, CSS-in-JS, or any styling solution.

      ```css theme={null}
      .dialog-overlay {
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        inset: 0;
        animation: fadeIn 200ms;
      }

      .dialog-content {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 24px;
        max-width: 450px;
        animation: slideUp 200ms;
      }
      ```

      <Note>All Radix components support refs, event handlers, and custom props for maximum styling flexibility.</Note>
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Explore Components
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Browse our collection of accessible, composable components
  </p>

  <CardGroup cols={3}>
    <Card title="Dialog" icon="window-maximize" href="/components/dialog">
      Modal dialogs with focus management and accessibility
    </Card>

    <Card title="Dropdown Menu" icon="bars" href="/components/dropdown-menu">
      Menus with keyboard navigation and nested support
    </Card>

    <Card title="Select" icon="chevron-down" href="/components/select">
      Custom select controls with typeahead and grouping
    </Card>

    <Card title="Tooltip" icon="message-dots" href="/components/tooltip">
      Accessible tooltips with customizable positioning
    </Card>

    <Card title="Accordion" icon="list" href="/components/accordion">
      Collapsible sections with keyboard control
    </Card>

    <Card title="Tabs" icon="folder" href="/components/tabs">
      Tabbed interfaces with roving focus
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Why Radix UI?
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    The foundation for your design system
  </p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#1c2424] dark:hover:border-[#1c2424] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="flex items-center gap-3 mb-3">
          <div className="text-2xl">♿</div>
          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 m-0">Accessible</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
          WAI-ARIA compliant components tested with screen readers and keyboard navigation
        </p>
      </div>
    </div>

    <div className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#1c2424] dark:hover:border-[#1c2424] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="flex items-center gap-3 mb-3">
          <div className="text-2xl">🎨</div>
          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 m-0">Unstyled</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
          No default styles to override—bring your own design system
        </p>
      </div>
    </div>

    <div className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#1c2424] dark:hover:border-[#1c2424] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="flex items-center gap-3 mb-3">
          <div className="text-2xl">🧩</div>
          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 m-0">Composable</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
          Granular component APIs with 1-to-1 DOM mapping for maximum flexibility
        </p>
      </div>
    </div>

    <div className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#1c2424] dark:hover:border-[#1c2424] overflow-hidden transition-colors no-underline bg-white dark:bg-[#1a1d27]">
      <div className="p-6">
        <div className="flex items-center gap-3 mb-3">
          <div className="text-2xl">⚡</div>
          <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 m-0">Developer Experience</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
          TypeScript support, controlled/uncontrolled components, SSR compatible
        </p>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
    Learn More
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Deep dive into concepts and guides
  </p>

  <CardGroup cols={2}>
    <Card title="Philosophy" icon="lightbulb" href="/concepts/philosophy">
      Understand the principles behind Radix UI Primitives
    </Card>

    <Card title="Styling" icon="palette" href="/styling">
      Learn about styling approaches and techniques
    </Card>

    <Card title="Accessibility" icon="universal-access" href="/accessibility">
      Explore accessibility features and best practices
    </Card>

    <Card title="TypeScript" icon="code" href="/guides/typescript">
      Get the most out of TypeScript type safety
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="bg-gradient-to-br from-[#1c2424] to-[#2a3333] dark:from-[#1a1d27] dark:to-[#242838] rounded-2xl p-8 md:p-12 border border-white/10 dark:border-[#27272a]">
    <h2 className="text-2xl sm:text-3xl font-bold text-white dark:text-gray-100 mb-4">
      Ready to get started?
    </h2>

    <p className="text-base text-gray-300 dark:text-gray-400 mb-6 max-w-2xl">
      Install your first component and start building accessible, composable interfaces today.
    </p>

    <a href="/installation" className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-white/10 hover:bg-white/20 border border-white/30 rounded-lg transition-colors no-underline">
      View Installation Guide
    </a>
  </div>
</div>