Overlays
Everything that floats above the page. Dropdown surfaces — popover, menu,
combobox, hover card — share one look (--ds-radius-lg, --ds-shadow-lg,
hairline border); modals and drawers add an overlay. Previews are pinned open so
you can read them without clicking, and every trigger opens the real thing.
Modal
Blocking tasks and confirmations, shown open over an app page.
Modal with title, centered, size="md": --ds-radius-xl, --ds-shadow-xl, Inter Tight title over a --ds-divider rule; ink primary action, default-variant cancel.color="red" and Cancel sits first.Modal options
Open each configuration — basic, centered, form, destructive, sizes, full screen and scrolling.
centered for short prompts.size="xs" 320px → "xl" 780px; forms use md.fullScreen for previews; scrollAreaComponent={ScrollArea.Autosize} scrolls inside the modal, the default scrolls the page.Drawer
Side panels for record details, edits and filters that keep the page in context.
Drawer.Root composition, position="right", size="xs"; the footer sticks to the bottom while the body scrolls.Popover
Small anchored panels for quick forms and inline filters.
opened, withArrow: the shared floating surface — --ds-radius-lg, --ds-shadow-lg, hairline border.Menu
Action lists on a button or icon — row actions, bulk actions and the user menu.
Menu.Label sections, leftSection icons, Kbd shortcuts, Menu.Divider, a disabled item and a color="red" danger item.aria-label required) and the header user menu — click either.Tooltip
Short labels for icon-only controls and extra context on hover or focus.
position top / right / bottom / left. Ink chip in light, inverted in dark (--tooltip-bg); withArrow is on by default.arrowPosition="side", and withArrow={false}.multiline with a fixed w for explanations longer than a few words.Tooltip.Floating follows the cursor — hover the area. Good for charts and heatmaps.Hover card
Richer previews of a linked record or person on hover.
HoverCard with initiallyOpened for this preview; in an app it opens on hover after openDelay. Hover the name to re-open it.Dialog
A non-blocking, corner-anchored message that leaves the page usable.
position={{ bottom: 20, right: 20 }}, withCloseButton. The button opens a live one at the bottom-right of your window.Combobox
The dropdown behind Select, Autocomplete and custom pickers.
useCombobox({ opened: true }): Combobox.Group, rich options, active check, Combobox.Footer. Same surface as Select / Menu.Combobox.Empty when nothing matches — try "zz". Arrow keys + Enter select.