Dialog
Understand the design system and contribute to it
Component preview
The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.
Preview
// All dialog imports in the app point here — this re-exports the responsive
// implementation so dialogs become bottom drawers on mobile automatically.
// Raw radix primitives live in dialog-base.tsx if ever needed directly.
export {
Dialog,
DialogTrigger,
DialogClose,
DialogPortal,
DialogOverlay,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
DialogResponsive,
DialogResponsiveTrigger,
DialogResponsiveClose,
DialogResponsivePortal,
DialogResponsiveOverlay,
DialogResponsiveContent,
DialogResponsiveHeader,
DialogResponsiveFooter,
DialogResponsiveTitle,
DialogResponsiveDescription,
} from "@/components/ui/dialog-responsive";