Docs

Molecules

Dialog

Modal window overlay for rich focused tasks and forms.

5 examplesOverlay ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Dialog } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Controlled open state

Drive the dialog with your own React state.

Controlled open state rendered preview

State: closed

Confirmation workflow

A pending state prevents double submissions before confirming.

Confirmation workflow rendered preview

Form inside a dialog

Collect and submit data without leaving the current page.

Form inside a dialog rendered preview

Scrollable content

Long content scrolls while the header and footer stay fixed.

Scrollable content rendered preview

Destructive confirmation

Emphasize risky actions with destructive styling.

Destructive confirmation rendered preview

Overview

Dialog is a Radix-powered modal molecule for focused tasks, confirmations, forms, and short workflows.

It provides accessible trigger, content, title, description, footer, and close primitives while using the UI library semantic tokens for dark mode, themes, and palettes.

API

ComponentPurpose
DialogRoot state container. Supports controlled and uncontrolled usage.
DialogTriggerOpens the dialog. Use asChild with Button for design-system styling.
DialogContentModal panel rendered in a portal with overlay.
DialogHeaderLayout wrapper for title and description.
DialogTitleAccessible dialog name. Prefer one per dialog.
DialogDescriptionAccessible supporting description.
DialogFooterLayout wrapper for actions.
DialogCloseCloses the dialog. Use asChild for custom buttons.

Accessibility Details

  • Use DialogTitle for the accessible dialog name.
  • Use DialogDescription for supporting instructions where useful.
  • Use aria-label on DialogContent only when no visible title is appropriate.
  • Escape key closes the dialog by default.
  • Focus management and modal semantics are provided by Radix Dialog.

Dark mode and reduced motion

  • Uses bg-popover, text-popover-foreground, border-border, and bg-background/80 tokens.
  • Animated overlay/content classes include motion-reduce:animate-none.

Accessibility & Keyboard

Dialog adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/dialog.json