Modal

Dialogs opened through the registry: sizes, confirm presets, reactive bodies, sticky footers, and scrollable content.

Open from anywhere

A button in one place opens a dialog defined elsewhere in the tree

Record anatomy

Identity glyph, action over human-readable name, identifier inline as a copy button

Compound title

Title, subtitle, and identifier stand alone, no icon and no toolbar

Modal title toolbar

The title's toolbar slot holds secondary actions before the close button

List-row keyed modals

Same elementId per row, distinguished by a unique modalKey plus typed args

AC Delco Q3

Brake & Chassis

Lighting SKUs

Filters (May)

Data table inside a modal

DataTable's own search box narrows the rows without leaving the dialog

Tabbed modal

Three panels of one record switch without changing route

Content list

ListItem rows for a flush file list, meta and actions holding their own lanes

New teammate form

Footer's next button stays disabled until the form validates

ConfirmModal: delete preset

Destructive styling, trash icon, 'Yes, delete' default

ConfirmModal: beforeClose abort

A guard keeps the modal open until a condition is met

Reactive body

message as a render function re-renders with caller state: no snapshot staleness

Markdown article

markdown-lite carries a full article's worth of bold, code, and links

Store selectors

The registry's read surface, for consumers that render outside useModal's owner component

selectedModalId · selectedModalKey · selectedModalArgs

Jotai atoms behind useModal: which element id is open, under which key, with which args. Subscribe to them directly when a distant component, a shell chrome badge, an analytics probe, needs the open-modal state without owning the modal.

Header and footer borders

ModalTitle and ModalFooter hideBorder toggle independently

Chrome

Toggle each border independently, then open the modal

Header border

Footer border

Styling slots

Every className the component exposes, and what it reaches

Modal

className: the modal-box, the panel itself
dialogClassName: the native dialog element behind it

ModalTitle

className: the header row
titleClassName: the title text

ModalFooter

className: the sticky footer row

ConfirmModal

className: the confirm box
titleClassName: the confirm title
messageClassName: the message body