Overlays

Modals, sheets, drawers, popovers, tooltips, menus, alerts, and toasts.

Dialog

Modal centred dialog with trap focus and dismiss controls.

tsx

<Dialog><Dialog.Trigger asChild><Button>Open</Button></Dialog.Trigger><Dialog.Content>…</Dialog.Content></Dialog>

ConfirmDialog

Opinionated wrapper for destructive or decision patterns.

tsx

<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.

tsx

<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.

tsx

<Drawer><Drawer.Trigger asChild><Button>Open</Button></Drawer.Trigger><Drawer.Content>…</Drawer.Content></Drawer>

Popover

Floating panel anchored to a trigger, for rich help or forms.

tsx

<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content>…</Popover.Content></Popover>

Tooltip

Contextual hint anchored to a trigger. Supplementary only.

tsx

<Tooltip><Tooltip.Trigger asChild><IconButton aria-label="Copy"><Copy /></IconButton></Tooltip.Trigger><Tooltip.Content>Copy</Tooltip.Content></Tooltip>

DropdownMenu

Contextual menu with arrow-key navigation, checkbox/radio items, and submenus.

tsx

<DropdownMenu><DropdownMenu.Trigger asChild><Button>More</Button></DropdownMenu.Trigger><DropdownMenu.Content>…</DropdownMenu.Content></DropdownMenu>

Alert

Inline banner for page-level or section-level notices.

Heads up

We're rolling out a new billing flow next Monday. No action required.

Payment required

Your trial ends in 3 days.

Saved. Your changes are live.

Build failed

Node 22 is required. Your Dockerfile pins 18.

tsx

<Alert severity="warning" title="Heads up">Trial ends in 3 days.</Alert>

Toast + Toaster

Transient feedback. Mount one Toaster per app; call toast.*() from anywhere.

tsx

<Toaster position="bottom-right" />
toast.success("Project created.");