Dialog
Modal dialogs with crop marks, an Esc hint and a footer tray.
A dialog interrupts the page for a focused task. Cuelark dialogs open with a short, eased rise, frame the panel in crop marks, show an Esc hint next to the close button, and can put actions in a footer tray under a dashed rule.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/dialog.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/dialog.
Builds on: motion
Usage
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
<Dialog>
<DialogTrigger asChild><Button>Open</Button></DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>Visible to your team.</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>Examples
Confirm a destructive action
A plain confirmation without crop marks.
Motion
The panel rises into place, then its crop marks close in like a registration lock. Exits stay on CSS so Radix can wait for them.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Dialog
Extends Radix Dialog.Root (open, defaultOpen, onOpenChange, modal).
DialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" | Maximum width. |
| marks | boolean | true | Crop marks around the panel. |
| showClose | boolean | true | Close button with the Esc hint. |
DialogFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| divided | boolean | false | Dashed rule and muted tray. |
DialogTrigger · DialogClose · DialogHeader · DialogTitle · DialogDescription
Accessibility
- Focus moves into the dialog on open, is trapped while open, and returns to the trigger on close.
- DialogTitle and DialogDescription are wired to aria-labelledby and aria-describedby.
- Esc and a click on the overlay close it; the page behind is inert to screen readers.
FAQ
Also searched as: react dialog · shadcn dialog · modal component · react modal · tailwind dialog