Overlays
Modals, sheets, drawers, popovers, tooltips, menus, alerts, and toasts. Every sample below is exhaustive — each labeled row shows every size, side, severity, and variant so nothing is hidden.
Dialog
Modal centred dialog with trap focus and dismiss controls. Every size.
<Dialog><Dialog.Trigger asChild><Button>Open</Button></Dialog.Trigger><Dialog.Content size="md">…</Dialog.Content></Dialog>ConfirmDialog
Opinionated wrapper for decision patterns. Every severity — primary, warning, and danger.
<ConfirmDialog severity="danger" title="Delete workspace?" confirmLabel="Delete" trigger={<Button severity="danger">Delete</Button>} onConfirm={async () => {}} />Sheet
Side-anchored modal. Great for filters, inspectors, mobile nav. Every side.
<Sheet><Sheet.Trigger asChild><Button>Open</Button></Sheet.Trigger><Sheet.Content side="right">…</Sheet.Content></Sheet>Drawer
Bottom-anchored sheet with a grab-handle affordance. Mobile-first. Every size.
<Drawer><Drawer.Trigger asChild><Button>Open</Button></Drawer.Trigger><Drawer.Content size="md">…</Drawer.Content></Drawer>Popover
Floating panel anchored to a trigger, for rich help or forms. Every side plus alignment.
<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content side="bottom" align="start">…</Popover.Content></Popover>Tooltip
Contextual hint anchored to a trigger. Supplementary only. Every side.
<Tooltip><Tooltip.Trigger asChild><IconButton aria-label="Copy"><Copy /></IconButton></Tooltip.Trigger><Tooltip.Content side="top">Copy</Tooltip.Content></Tooltip>Alert
Inline banner for page- or section-level notices. Every severity × variant, plus dismissible and an inline action.
<Alert severity="warning" variant="soft" title="Heads up">Trial ends in 3 days.</Alert>Toast + Toaster
Transient feedback. Mount one Toaster per app; call toast.*() from anywhere. Every severity plus a promise toast.
<Toaster position="bottom-right" />
toast.success("Project created.");