Stalk UI

Component

Dialog

Displays modal content in a focus-trapped overlay.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/dialog

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Dialog.Root>
  <Dialog.Trigger>Open dialog</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Confirm changes</Dialog.Title>
  </Dialog.Content>
</Dialog.Root>
Theme
<Dialog.Root>
  <Dialog.Trigger>Settings</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Settings</Dialog.Title>
      <Dialog.Description>Manage your preferences.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Dialog.Close asChild>
        <Button variant="outline">Cancel</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>
Theme
<Dialog.Root defaultOpen modal={false}>
  <Dialog.Content draggable layout="banded" overlay={false}>
    <Dialog.Header>
      <Dialog.Title>Inspector</Dialog.Title>
      <Dialog.Description>
        Drag the header to move; release near home to snap back.
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>Floating panel</Dialog.Body>
  </Dialog.Content>
</Dialog.Root>
Theme
<Dialog.Root>
  <Dialog.Trigger>Release notes</Dialog.Trigger>
  <Dialog.Content scrollBehavior="inside">
    <Dialog.Header>
      <Dialog.Title>Release notes</Dialog.Title>
      <Dialog.Description>Header and footer stay pinned; the body scrolls.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>Long changelog…</Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close asChild>
        <Button variant="outline">Close</Button>
      </Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`overlay``boolean`No-Render the dimming overlay behind the content. Default \`true\`. Set \`false\`<br />for a non-modal dialog (\`<Dialog modal={false}>\`) so the page behind stays<br />interactive and click-through — Radix's \`modal\` prop is forwarded by<br />\`Dialog.Root\`, this just drops the blocking overlay to match.
`layout``'padded' \'banded'`No-
`scrollBehavior``'outside' \'inside'`No-
`draggable``boolean`No-Let the pointer drag the dialog by its \`Dialog.Header\`. Pairs with<br />\`modal={false}\` + \`overlay={false}\` for floating panels.
`dragSnapDistance``number`No-Released within this many px of home, the dialog snaps back. Default 24.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`layout``padded`, `banded`
`scrollBehavior``outside`, `inside`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/dialog.json`
  • Recipe: `dialog`
  • Files: `src/components/ui/dialog.tsx`