Aria-accessible modals, dialogs, drawers, menus, tooltips, and progress spinners
Overlays & Loading Indicators
NkModal Dialog
Fully accessible dialog with backdrop dimming, screen reader announcements, ESC-key dismiss, and layout animation.
AlertDialog (confirm)
react-aria role="alertdialog": not dismissable by backdrop click, confirm/cancel close the dialog and run their handler. Used for destructive confirmations.
DropdownMenu
react-aria menu: arrow-key navigation, typeahead, disabled items, closes on select. Items run their handler via onClick.
Tooltip
react-aria tooltip: shows on hover and keyboard focus, dismisses on blur. Tab to the button to see it without a mouse.
NkLoadingSpinner
Size sm:
Size md with message:
Loading in progress...
Size lg:
Loading page
NkDialog (compound)
The most-used overlay in the app (24 files across hub / admin / account dialogs). Unlike NkModal's prop-driven API, this is a Radix-style compound: you control open / onOpenChange on NkDialog and compose the body from NkDialogContent, NkDialogHeader,NkDialogTitle, NkDialogDescription, and NkDialogFooter. It wraps react-aria's Modal, so the title and description are aria-wired via slot="title" / slot="description" internally.
NkDrawer (side panel)
A right-side overlay drawer portaled to document.body, used for side panels like infra / environment detail. Fully controlled via isOpen / onClose with a required ariaLabel; Escape and backdrop click dismiss, and body scroll locks while open. The children are the panel's own layout — build the header / scrollable body / footer inside.