Dialog

A modal window that focuses the user on a single task.

$ pnpm dlx shadcn@latest add https://dashral.com/r/dialog.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/dialog.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/dialog

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { Input } from "@/components/dashral/input"
3import { Dialog, DialogClose } from "@/components/dashral/dialog"
4
5<Dialog
6  trigger={<Button variant="outline">Edit profile</Button>}
7  title="Edit profile"
8  description="Your team sees the change at once."
9  form={{ action: api.profile.update }}
10  footer={
11    <>
12      <DialogClose asChild>
13        <Button variant="outline">Cancel</Button>
14      </DialogClose>
15      <Button type="submit">Save</Button>
16    </>
17  }
18>
19  <Input label="Name" name="name" defaultValue="Olivia Martin" />
20</Dialog>

Examples

Confirmation

Hide the close button so the user makes an explicit choice.

Invite people

A form dialog: paste emails, pick a role, send. It shows it's sending, then closes with a toast.

OMLJSDBS

API reference

Dialog

Also takes every prop of Radix Dialog(opens in a new tab).

Prop	Type	Default
`trigger`	`ReactElement` What opens it. Leave it out to open it with open / onOpenChange.	—
`title`	`ReactNode` Required: it names the dialog. Hide it with classNames.title "sr-only" if the design has none.	—
`description`	`ReactNode` Under the title; it describes the dialog.	—
`children`	`ReactNode` The body.	—
`footer`	`ReactNode` Buttons at the bottom.	—
`form`	`ComponentProps<"form">` Makes the body and footer one form, e.g. { onSubmit } or { action }.	—
`size`	`"sm" \| "md" \| "lg" \| "xl"` The window's width.	`"md"`
`showCloseButton`	`boolean` The × in the corner.	`true`
`open / defaultOpen / onOpenChange`	Controlled or initial state.	—
`classNames`	`{ header, title, description, footer }` Classes for each part.	—
`className`	`string` The window's classes.	—

DialogClose

Closes the dialog: wrap a Cancel button in the footer.

Also takes every prop of Radix Dialog(opens in a new tab).

Prop	Type	Default
`asChild`	`boolean` Render the child element instead (e.g. a Next.js Link), passing these styles and props to it.	`false`

Keyboard

Keys	Action
`Tab`or`Shift+Tab`	Move between controls; focus stays inside while it's open
`Escape`	Close and return focus to what opened it

Accessibility

role="dialog" with aria-modal, labelled by its title and described by its description.
The rest of the page is inert while it's open.

Motion

The window springs in from 95% with a soft blur clearing; the backdrop fades in and blurs the page a little. Closing is quicker.