Dialog

A real <dialog>, opened with showModal(). That single call gets a native top-layer stacking context, a native focus trap, native Escape-to-close, and a native ::backdrop. Exit transitions finish before the final native close(), so consumer-owned animations can run; focus restores afterwards.

import { useState } from "react";
import { Button, Dialog } from "@kernelui-lib/react";

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

<Button onClick={() => setOpen(true)}>Delete account</Button>
<Dialog
  open={open}
  onOpenChange={setOpen}
  title="Delete account"
  description="This can't be undone."
  backdrop="blur"
  classNames={{
    root: "my-dialog",
    title: "my-dialog-title",
  }}
>
  <Button variant="danger" onClick={() => setOpen(false)}>
    Confirm
  </Button>
</Dialog>

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Dialog open={open} onOpenChange={setOpen} title="Invite a teammate" description="They'll get an email with a link to join this workspace.">
  ...
</Dialog>

<kernel-dialog title="Invite a teammate" description="They'll get an email with a link to join this workspace.">
  ...
</kernel-dialog>

Props

Composition

Stable data-slot hooks:dialog, dialog-header,dialog-title, dialog-description,dialog-content, dialog-close. Open state: data-open, data-opening,data-closing. Style ::backdrop viabackdrop or the --kernel-dialog-backdrop-bg/ --kernel-dialog-backdrop-filter custom properties.

Accessibility

• Focus moves into the dialog on open and returns to the trigger after the closing animation completes, both native to showModal() / close().
• Escape closes it through the same animation-aware path as the close button and backdrop click.
• title is linked via aria-labelledby automatically and accepts rich React content.
• prefers-reduced-motion skips the exit wait and closes immediately.