Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Installation


npx shadcn@latest add @rescript-shadcn/Dialog

Usage

<Dialog>
  <Dialog.Trigger render={<Button variant=Outline />}>
    {"Open"->React.string}
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title> {"Are you absolutely sure?"->React.string} </Dialog.Title>
      <Dialog.Description>
        {"This action cannot be undone."->React.string}
      </Dialog.Description>
    </Dialog.Header>
  </Dialog.Content>
</Dialog>

Examples

Custom Close Button

Replace the default close control with your own button.

No Close Button

Use showCloseButton={false} to hide the close button.

Sticky Footer

Keep actions visible while the content scrolls.

Scrollable Content

Long content can scroll while the header stays in view.

API Reference

See the Base UI documentation for more information.