Back to components

Dialog

Feedback

Stablev1.0.0

Modal dialog with focus trap and accessible dismissal, built on Ariakit.

Preview

Installation

pnpm add @component-labs/ui

Usage

import { Dialog } from "@component-labs/ui";

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Props

NameTypeDefaultDescription
openboolean-Controlled open state (Dialog.Root)
onOpenChange(open: boolean) => void-Callback when open state changes (Dialog.Root)
defaultOpenbooleanfalseDefault open state for uncontrolled usage (Dialog.Root)
backdropbooleantrueWhether to show the backdrop overlay (Dialog.Content)

Examples

Basic Dialog

Simple confirmation dialog

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Are you sure?</Dialog.Title>
      <Dialog.Description>
        This action cannot be undone.
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Dialog.Close>
        <Button variant="ghost">Cancel</Button>
      </Dialog.Close>
      <Button variant="destructive">Delete</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Controlled Dialog

Using dialog in controlled mode

const [open, setOpen] = useState(false);

<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog.Trigger>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Controlled Dialog</Dialog.Title>
    </Dialog.Header>
    <p>Dialog is {open ? 'open' : 'closed'}</p>
  </Dialog.Content>
</Dialog.Root>

Form Dialog

Dialog with form content

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Add User</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Create Account</Dialog.Title>
      <Dialog.Description>
        Enter user details below
      </Dialog.Description>
    </Dialog.Header>
    <form className="space-y-4">
      <Input label="Name" />
      <Input label="Email" type="email" />
    </form>
    <Dialog.Footer>
      <Dialog.Close>
        <Button variant="outline">Cancel</Button>
      </Dialog.Close>
      <Button type="submit">Create</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Performance

Bundle Size

~4kB gzipped

Minified and gzipped

Dependencies

  • •@ariakit/react
  • •class-variance-authority

Accessibility

  • •Built on Ariakit's accessible Dialog component
  • •Focus trap - keeps focus within dialog
  • •Escape key to close
  • •Click outside/backdrop to dismiss
  • •Proper ARIA attributes (role='dialog', aria-modal)
  • •Focus returns to trigger on close
  • •Screen reader announcements