Dialog
A modal dialog component for displaying content over the main interface with backdrop, keyboard navigation and accessibility features
Installation
Install the Dialog component using the nocta-ui CLI:
npx @nocta-ui/cli add dialogImport the components you need:
import {
Dialog,
DialogTrigger,
DialogSurface,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogActions,
DialogClose,
} from '@/components/ui/dialog';Examples
Default Dialog
Dialog with Actions
Sizes
API Reference
Dialog
Prop
Type
DialogTrigger
Prop
Type
DialogSurface
Prop
Type
DialogContent
Prop
Type
DialogClose
Prop
Type
DialogHeader
Prop
Type
DialogTitle
Prop
Type
DialogDescription
Prop
Type
DialogFooter
Prop
Type
DialogActions
Prop
Type