Tollerud

Tollerud UI/Navigation & Overlays / Dialog

Navigation & Overlays

Navigation & Overlays

Wayfinding and floating surfaces — breadcrumbs, pagination, menus, dialogs, toasts and the keyboard-first command palette.

Navigation

Pagination

Numbered pages with prev/next, keyboard and disabled-edge handling.

pagination
Overlays

A focused modal for confirmation and forms. Use compound parts (`DialogHeader`, `DialogBody`, `DialogFooter`) or the controlled `DialogPanel` helper (same API as `Drawer`). Default width is `md` (`max-w-xl`); pass `size` for `sm`, `lg`, `xl`, or `full`. Escape or backdrop click closes.

dialog

Re-open the confirm dialog above, or use size="lg" / xl / full for forms and detail views.

dialog-lg

Toasts

Transient confirmations via useToast() or sonner. Mount <Toaster /> once near the app root.

toasts

Drawer / Sheet

Side panel for detail views and slide-over forms. Opens from the right or left; closes on Esc or overlay click.

drawer

The signature component. ⌘K opens it anywhere; arrow keys navigate, Enter selects, Esc closes.

or press ⌘+K
command