Dialogs interrupt reading. Their animation should feel orthogonal to reading direction · appearing from above (scale) rather than from a reading-axis edge.

Default

The content reads vertically · title, body, and actions as columns flowing right-to-left. The dialog still scales up from center (not from a trigger), which reads as a layer above the page rather than a continuation of the reading flow.

tsx
1function Dialog({ open, onClose, title, description, actions }) {
if (!open) return null
return (
  <div
    role="dialog"
    aria-modal="true"
    aria-labelledby="dialog-title"
    aria-describedby="dialog-desc"

Source

The exact file npx verticallyworks add dialog copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalDialog · a modal dialog whose content reads as vertical columns.
5 *
6 * Title, description, and actions flow right→left as columns, but the dialog
7 * itself scales from center: an overlay is a layer above the reading flow,
8 * not a continuation of it. Focus is trapped while open, Escape and the scrim

Guidance

Animate with scale-up from center · avoids reading-axis conflict
Keep dialogs to a maximum of 2 actions
Trap focus inside the dialog until dismissed

Don't

Animate dialogs from the reading direction edges
Use dialogs for non-critical information (use Toast instead)
Place vertical text inside a dialog · it reads like content, not a decision interface

Accessibility

role='dialog', aria-modal, aria-labelledby, aria-describedby. Focus trapped. Escape closes. Focus returns to trigger.

Open question

Should a dialog's action buttons be arranged horizontally (conventional) or vertically (matching the layout) in a fully vertical interface?

PreviousSheet Next Marker

1	function Dialog({ open, onClose, title, description, actions }) {
2	if (!open) return null
3	return (
4	<div
5	role="dialog"
6	aria-modal="true"
7	aria-labelledby="dialog-title"
8	aria-describedby="dialog-desc"

1	"use client";
2
3	/**
4	* VerticalDialog · a modal dialog whose content reads as vertical columns.
5	*
6	* Title, description, and actions flow right→left as columns, but the dialog
7	* itself scales from center: an overlay is a layer above the reading flow,
8	* not a continuation of it. Focus is trapped while open, Escape and the scrim