Dialog

The modal for a create-record flow (no page dimming, like Attio; variant="alert" confirms dim the page with the scrim): a radius-16 frosted-glass shell (60% tint, 15px blur, layered shadow) around a solid radius-12 card, a 44px header with an inset divider, a scrollable body, and a bordered footer. It composes Zag's dialog machine, so focus trapping, scroll lock, and Escape / outside-click dismissal come from the machine rather than hand-rolled handlers.

Alert

variant="alert" is the small destructive confirm: a 440px-wide card (the default width for the alert) with an 18px title, a 14px description 4px below it, 16px between the description and the footer's top rule, and a 45px footer (8px padding, 8px between buttons). Pair it with <DialogFooter variant="alert">. Measured on Attio's "Delete company" confirm.

Installation

npm install @crisp-ui-kit/crisp

Props

Also exported: DialogBody (scrollable, gap-stacked content region) and DialogFooter (right-aligned action bar). The reusable form classes — dialog-field, dialog-field-label, dialog-more, dialog-submit, dialog-submit-key — style stacked label/input rows and the primary action.

Notes

• Focus & scroll. Opening traps focus inside the dialog and locks background scroll; closing returns focus to the trigger — all from the Zag machine.
• Dismissal. Escape, an outside pointer-down, and the header close button all call onOpenChange(false); the caller decides whether to actually close.
• Portal. The dialog renders in a portal at the document root, so it is never clipped by an ancestor's overflow — style its content through the dialog-* classes rather than a wrapping selector.