Dialog

Focuses attention on content or a task in an overlay.

Installation

Install Dialog from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/dialog

Usage

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
} from "@/components/ui/dialog"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Dialog	The root component that owns the primary structure and state.
DialogClose	Closes the current overlay or disclosure.
DialogContent	Contains the primary visible content.
DialogDescription	Provides supporting context for the current region.
DialogFooter	Groups supporting actions or metadata.
DialogHeader	Groups heading and introductory content.
DialogOverlay	Covers background content while an overlay is active.
DialogPortal	Moves overlay content to a stable document layer.
DialogTitle	Provides the visible heading for the current region.
DialogTrigger	Controls opening, selection, or disclosure behavior.

API Reference

Dialog exports 10 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Dialog Component
DialogClose Component
DialogContent Component
DialogDescription Component
DialogFooter Component
DialogHeader Component
DialogOverlay Component
DialogPortal Component
DialogTitle Component
DialogTrigger Component

Accessibility

Dialog inherits focus management and keyboard support from Base UI; keep the provided trigger and content parts together.
Give icon-only triggers an accessible name, retain visible focus styles, and verify Escape and focus-return behavior in the final composition.

Source

Dialog uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Date Picker Direction