Build · New

Dialog

Stops the flow to confirm an action, warn about a risk or collect a short input. It sits on a dimmed overlay and keeps focus until it closes.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/dialog

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { Dialog, DialogActions, DialogClose, DialogContent, DialogHeader, DialogTrigger } from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger render={<Button />}>Send money</DialogTrigger>
  <DialogContent>
    <DialogHeader icon={CheckCircleIcon} title="Transfer sent" description="It usually arrives within a few minutes." />
    <DialogActions>
      <DialogClose render={<Button variant="outline" />}>View receipt</DialogClose>
      <DialogClose render={<Button />}>Done</DialogClose>
    </DialogActions>
  </DialogContent>
</Dialog>

Examples

Warning, horizontal

layout="horizontal" puts the icon beside the text at 544px (size="lg"), and layout="end" gathers the buttons at the inline end. For wide screens and short text.

Destructive confirmation

AlertDialog for what deletes or removes: role alertdialog, a click outside doesn't close it, and focus starts on Cancel. The title asks a specific question, the red button repeats the verb, and the card number stays left to right.

A short task in a form

Focus starts in the field and Enter sends. disablePointerDismissal stops a click outside from closing it, so nothing typed is lost.

Long content

The dialog never runs past the screen: DialogBody scrolls while the header and actions stay put. Here with dividers above and below the body, and a checkbox at the start of the action row.

A list inside the dialog

Menus and lists opened from inside a dialog show above it, on the popover layer.

API reference

Dialog / AlertDialog

Prop	Type	Default	Description
`open / defaultOpen / onOpenChange`	`boolean`		Controls whether it's open.
`disablePointerDismissal`	`boolean`	`false`	A click outside doesn't close it (forms). Always so in `AlertDialog`.

DialogContent

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"sm"`	Width: 400 for confirmations, 480, 544 for Horizontal, 640 for forms.
`breakpoint`	`"auto" \| "desktop" \| "mobile"`	`"auto"`	Figma's Breakpoint: centred on desktop, at the bottom on phones.
`initialFocus / finalFocus`	`RefObject<HTMLElement>`		Where focus starts and where it returns.

DialogHeader

Prop	Type	Default	Description
`title`	`ReactNode`		Figma's Title; it names the dialog.
`description`	`ReactNode`		Figma's Description; it describes the dialog.
`icon`	`IconComponent`		Figma's Featured icon.
`iconColor`	`"success" \| "warning" \| "error" \| "brand" \| "gray"`	`"success"`	The Icon holder's color.
`layout`	`"stacked" \| "centered" \| "horizontal"`	`"stacked"`	The header's Figma Type.
`closeButton`	`boolean`	`true`	Figma's X close button.
`closeLabel`	`string`	`"Close"`	The close button's name, in the dialog's language by default.
`divider`	`boolean`	`false`	Figma's Divider.
`pattern`	`boolean`	`true`	The decorative rings behind the icon.

DialogActions

Prop	Type	Default	Description
`children`	`ReactNode`		The buttons in reading order: Cancel, then confirm.
`layout`	`"fill" \| "stacked" \| "end"`	`"fill"`	The actions' Figma Type. On phones every type stacks, confirm on top.
`start`	`ReactNode`		A checkbox or link at the row's start (`layout="end"`).
`divider`	`boolean`	`false`	Figma's Divider.

DialogBody / DialogTrigger / DialogClose

Prop	Type	Default	Description
`DialogBody`	`div`		The content between header and actions; it scrolls when needed.
`render`	`ReactElement`		The visible button for `DialogTrigger` and `DialogClose`.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`TabShift+Tab`	Between the dialog's controls only; the page behind is inert.
`Esc`	Closes it and returns focus to the button that opened it.
`Enter`	Submits the form inside.

ARIA

Role dialog (or alertdialog for destructive confirmations) with aria-modal; the title names it and the description describes it.
Focus starts in the first field, or on Cancel in a destructive confirmation, and returns to the button that opened it.
The close button has a name (Close). Danger isn't shown by the red button alone: the title and the verb say it.
It opens in 300ms, and only fades under reduced motion.

Arabic and RTL notes

Mirrors

The icon and text align right, and the close button moves to the top left.
The buttons mirror: Cancel on the right, the confirm button on the left, at the inline end.
The dialog carries the direction and language of where it's written, even though it's portaled.

Does not mirror

The success, warning and trash icons, and the symmetric rings.

Numerals: Amounts follow the numerals setting; card numbers stay left to right inside <bdi dir="ltr">.
Arabic typography: Title body-18 Semibold, description body-14, lg buttons.
Mixed-direction text: Write the title as a specific question: “Remove this card?”, not “Are you sure?”.

All components ›