Chapter 2: Getting Started

Core Idea

A minimal end-to-end walkthrough — install, import, structure, style — using Popover as the example, showing the three-step shape every Radix primitive follows.

Key Concepts

• Root/Trigger/Portal/Content anatomy: the common part structure most Radix primitives share (a stateful Root, a Trigger that toggles it, a Portal that escapes DOM stacking, and a Content/Arrow pair for the rendered UI).
• Per-primitive entrypoints: radix-ui/popover style subpath imports help some bundlers tree-shake more aggressively than importing from the package root.
• className styling hook: every part accepts className, passed straight to the underlying DOM node.

Code Examples

import * as React from "react";
import { Popover } from "radix-ui";

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

• What it demonstrates: the canonical Root → Trigger → Portal → Content shape reused across nearly every overlay-style primitive (Dialog, DropdownMenu, HoverCard, Tooltip, Select…).

Key Takeaways

1. Every Radix primitive follows the same install → import parts → style parts workflow — learning one overlay component transfers directly to the others.
2. The library is intentionally low-level: you're expected to build your own higher-level API/wrapper components on top.
3. A fully accessible component (WAI-ARIA pattern, controlled/uncontrolled, focus management, dismiss/layering behavior) comes "for free" from just wiring up the parts.

Connects To

• Popover chapter: full API reference for the component used in this walkthrough.
• Styling guide: how to actually style the parts shown here.