An accessible modal with a blurred scrim, scale-and-fade transitions, a focus trap and focus returned to the trigger.
This permanently deletes the project and its 14 deployments.
npx shadcn@latest add https://hyperblur.dev/r/dialog-modal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dialog-modal.tsx.
import { DialogModal } from "@/components/hyperblur/dialog-modal"
<DialogModal trigger="Open" title="Rename project" description="Pick a new name." footer={(close) => <DialogButton tone="primary" onClick={close}>Save</DialogButton>} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the dialog asks to open or close. | |
| title | ReactNode | Heading. Also names the dialog through aria-labelledby. | |
| description | ReactNode | Supporting text under the title. Wired to aria-describedby. | |
| children | ReactNode | Body content. | |
| footer | ReactNode | ((close: () => void) => ReactNode) | Footer content, usually buttons. A function receives a close callback. | |
| trigger | ReactNode | Label for a built-in trigger button. Omit it to open the dialog from your own state. | |
| container | "viewport" | "parent" | "viewport" | viewport covers the screen through a portal. parent fills the nearest positioned ancestor. |
| variant | "default" | "destructive" | "default" | destructive adds a warning badge and a red accent. |
| closeOnEscape | boolean | true | Close when Escape is pressed inside the dialog. |
| closeOnScrim | boolean | true | Close when the scrim is clicked. |
| showClose | boolean | true | Show the close button in the corner. |
| autoFocus | boolean | true | Move focus into the dialog on open. An element with data-autofocus wins over the first focusable one. |
| maxWidth | number | 440 | Maximum panel width in pixels. |
| accent | string | "#2f7bff" | Focus ring color. |