Dialog

A modal dialog rendered with position:fixed, focus trapping, Escape-key close, and ARIA wiring. Supports compound sub-components Dialog.Header, Dialog.Body, and Dialog.Footer, plus four sizes.

Import

tsx

import { Dialog } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

Preview

Props

Prop	Type	Default	Description
open	`boolean`	—	Controls visibility of the dialog.
onClose	`() => void`	—	Called when the user closes the dialog via overlay click or Escape.
title	`string`	—	Renders a built-in header with a title.
description	`string`	—	Subtitle rendered under the title in the built-in header.
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Maximum width of the dialog panel.
closeOnOverlayClick	`boolean`	`true`	Whether clicking outside closes the dialog.

Examples

Basic

tsx

import { useState } from 'react'
import { Button, Dialog } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open dialog</Button>
      <Dialog open={open} onClose={() => setOpen(false)} title="Confirm action" description="This cannot be undone.">
        <Dialog.Body>
          Are you sure you want to delete this item?
        </Dialog.Body>
        <Dialog.Footer>
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
          <Button variant="danger" onClick={() => setOpen(false)}>Delete</Button>
        </Dialog.Footer>
      </Dialog>
    </>
  )
}

Custom header via compound parts

tsx

import { useState } from 'react'
import { Button, Dialog, Badge } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <Dialog.Header>
          <h2 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 700 }}>Settings</h2>
          <Badge variant="info">Beta</Badge>
        </Dialog.Header>
        <Dialog.Body>Configure your preferences here.</Dialog.Body>
        <Dialog.Footer>
          <Button onClick={() => setOpen(false)}>Save</Button>
        </Dialog.Footer>
      </Dialog>
    </>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */