Dialog

Overlay

A modal overlay that focuses the user on a specific task or piece of content by dimming the background.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add dialog

Import the component directly from the package:

import { Dialog } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
open	boolean	Controlled open state.
onOpenChange	(open: boolean) => void	Callback when open state changes.
className	string	Additional CSS classes to apply.

Implements the WAI-ARIA Dialog pattern. Focus is trapped. Uses `role="dialog"` and `aria-modal="true"`. Closes on `Escape` key.

Alert DialogModal for urgent confirmations.

Context MenuRight-click contextual action menu.

DrawerSlide-in edge panel.

Dropdown MenuFloating action menu.

Hover CardRich preview on hover.

PopoverFloating inline overlay.

TooltipContextual hover label.