radix-vault

Local reference for Radix UI primitives. Working subset for the radix-mesh widget series.
Overlay
Form
Navigation

OVERLAYDialog

A modal window overlaid on the page. Blocks interaction with the rest of the UI until dismissed. Manages focus trap, scroll lock, and Escape-to-close out of the box.

Use for: confirmations, forms that need full attention, message composers, anything where you want everything else to wait.

For non-modal floating panels, use Popover instead. For destructive confirmations specifically, see AlertDialog.

Anatomy

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title />
      <Dialog.Description />
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Key props

Dialog.Root

Dialog.Content

Keyboard

Key Behavior
Esc Closes the dialog
Tab / Shift+Tab Cycles focus inside the content (focus is trapped while open)

Minimal example

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

<Dialog.Root>
  <Dialog.Trigger>Send message</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title>Send to agent</Dialog.Title>
      <Dialog.Description>Message will land in the recipient's mailbox.</Dialog.Description>
      <textarea />
      <Dialog.Close>Send</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Accessibility

Source

OVERLAYDropdownMenu

OVERLAYTooltip

A small floating label that appears on hover or keyboard focus. Strictly informational — never put interactive content inside. Tooltips are for naming icon-only controls, expanding abbreviations, surfacing units, etc.

For interactive floating panels, use Popover. For named hover-cards (link previews), use HoverCard.

Anatomy

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger />
    <Tooltip.Portal>
      <Tooltip.Content>
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

Tooltip.Provider typically wraps your whole app once.

Key props

Tooltip.Provider

Tooltip.Root

Tooltip.Content

Keyboard

Key Behavior
Tab (focus trigger) Tooltip opens immediately
Esc Closes the tooltip

Tooltips also open on hover and close on blur or pointer-leave.

Minimal example

import * as Tooltip from '@radix-ui/react-tooltip';

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <button aria-label="HALT">⏹</button>
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content side="top" sideOffset={4}>
        Halt all messaging
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

Accessibility

Source

OVERLAYToast

A succinct, transient message that appears in a corner viewport and auto-dismisses. Supports actions and swipe-to-dismiss on touch.

Use for: "message sent", "agent went offline", "halt acknowledged", confirmations after async actions. Not for blocking decisions (use Dialog or AlertDialog).

Anatomy

<Toast.Provider>
  {/* one or more Toast.Root rendered conditionally */}
  <Toast.Root>
    <Toast.Title />
    <Toast.Description />
    <Toast.Action />
    <Toast.Close />
  </Toast.Root>
  <Toast.Viewport />
</Toast.Provider>

The Viewport is the fixed-position container the toasts render into. It's typically placed once at the root of your app.

Key props

Toast.Provider

Toast.Root

Toast.Action

Toast.Viewport

Keyboard

Key Behavior
F8 (default hotkey) Move focus into the toast viewport
Tab / Shift+Tab Cycle through toasts
Esc Close the focused toast

Minimal example

import * as Toast from '@radix-ui/react-toast';

<Toast.Provider swipeDirection="right">
  <button onClick={() => setOpen(true)}>Send</button>
  <Toast.Root open={open} onOpenChange={setOpen}>
    <Toast.Title>Message sent</Toast.Title>
    <Toast.Description>Delivered to goulard3120</Toast.Description>
    <Toast.Action altText="Undo send" asChild>
      <button onClick={undo}>Undo</button>
    </Toast.Action>
    <Toast.Close>×</Toast.Close>
  </Toast.Root>
  <Toast.Viewport />
</Toast.Provider>

Accessibility

Source

FORMSwitch

A two-state on/off control. Visually a sliding toggle, semantically a role="switch" checkbox. Use when flipping the switch takes effect immediately (no Save button needed).

For an on/off control that's part of a Save-and-submit form and feels more like a checkbox, use Checkbox. For one-of-N choices, use RadioGroup. For a button that toggles a UI state (bold/italic in a toolbar), use Toggle.

Anatomy

<Switch.Root>
  <Switch.Thumb />
</Switch.Root>

Key props

Switch.Root

Keyboard

Key Behavior
Tab Focuses the switch
Space / Enter Toggles the state

Minimal example

import * as Switch from '@radix-ui/react-switch';

<label>
  HALT mode
  <Switch.Root checked={halted} onCheckedChange={setHalted}>
    <Switch.Thumb />
  </Switch.Root>
</label>

Accessibility

Source

FORMSlider

A numeric range input. Single thumb for a single value; multiple thumbs for a range. Supports steps, orientation, and inversion.

Use for: volume, opacity, threshold tuning, date or numeric ranges. For discrete one-of-N choice, prefer RadioGroup or a stepper.

Anatomy

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>

For a two-thumb range, render Slider.Thumb twice and pass an array to value / defaultValue.

Key props

Slider.Root

Keyboard

Key Behavior
ArrowRight / ArrowUp Increment by step
ArrowLeft / ArrowDown Decrement by step
PageUp / PageDown Increment / decrement by larger amount
Home / End Jump to min / max

Minimal example

import * as Slider from '@radix-ui/react-slider';

<Slider.Root
  defaultValue={[5000]}
  min={1000}
  max={30000}
  step={500}
  onValueChange={([ms]) => setToastDuration(ms)}
>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb aria-label="Toast duration in ms" />
</Slider.Root>

Accessibility

Source

NAVIGATIONTabs

Switches between mutually exclusive panels of content rendered in the same place. The active tab determines which panel is shown.

Use for: settings panes, dashboards with multiple views, anything where exactly one of N panels should be visible at a time.

Anatomy

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger value="..." />
  </Tabs.List>
  <Tabs.Content value="..." />
</Tabs.Root>

Key props

Tabs.Root

Tabs.Trigger

Tabs.Content

Keyboard

Key Behavior
Tab Focus moves into/out of the tab list
ArrowRight / ArrowLeft Move focus to next/prev trigger (horizontal)
ArrowDown / ArrowUp Same, in vertical orientation
Home / End Jump to first/last trigger
Enter / Space Activate trigger (only in manual mode)

Minimal example

import * as Tabs from '@radix-ui/react-tabs';

<Tabs.Root defaultValue="services">
  <Tabs.List aria-label="localMesh sections">
    <Tabs.Trigger value="services">Services</Tabs.Trigger>
    <Tabs.Trigger value="agents">Agents</Tabs.Trigger>
    <Tabs.Trigger value="messages">Messages</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="services">…service grid…</Tabs.Content>
  <Tabs.Content value="agents">…agent list…</Tabs.Content>
  <Tabs.Content value="messages">…message stream…</Tabs.Content>
</Tabs.Root>

Accessibility

Source

radix-vault · built 2026-05-07 · home