Stepwise UI

Modal

A confirmation dialog that blocks the page until the user makes a choice. Scales up from center on open (250ms) and closes faster (150ms), with content staggering in after the panel lands. Renders in a portal, traps focus, and closes on Escape or backdrop click.

Installation

npx stepwise-ui add modal

Default

import { Modal } from '@/components/stepwise/modal'

const [open, setOpen] = useState(false)

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Save changes?"
  description="Saving will update your published content immediately."
  confirmLabel="Save changes"
  onConfirm={() => { /* ... */ setOpen(false) }}
/>

Left aligned

Pass align="left" to left-align the icon, title, and description, and move the actions to the trailing edge as auto-width buttons instead of a centered, evenly-split row.
<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Invite teammates"
  description="They'll get an email with a link to join this workspace."
  confirmLabel="Send invites"
  align="left"
  onConfirm={() => { /* ... */ setOpen(false) }}
/>

Destructive

Red accent bar and confirm button. Pass loading to show a spinner while the action processes.
<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Delete your account?"
  description="This action cannot be undone."
  confirmLabel="Yes, delete account"
  variant="destructive"
  onConfirm={handleDelete}
  loading={deleting}
/>

Props

PropTypeDescription
open
boolean
Controls visibility.
onClose
() => void
Called on backdrop click or Escape.
title
string
Dialog heading.
description
string
Supporting copy below the title.
confirmLabel
string
Confirm button label. Default "Confirm".
variant
"default" | "destructive"
Visual style. Default "default".
align
"center" | "left"
Content alignment. Default "center".
onConfirm
() => void
Called when the confirm button is clicked.
loading
boolean
Shows a spinner in the confirm button.
children
ReactNode
Optional content between description and actions.