Dialog
Modal dialog component with both Free and Pro versions. Free offers basic modal, Pro adds animations and effects.
Pro features
What the Pro version adds to this component.
Advanced Animations
12+ animation variants including physics-based spring and elastic effects
Premium Variants
Glass, gradient, and neon variants with customizable effects
Backdrop Effects
Advanced overlay blur and gradient backdrop options
Extended Sizes
Fullscreen, responsive, and custom size options
Accessibility Plus
Enhanced focus management and screen reader support
Performance Optimized
GPU-accelerated animations with reduced motion support
Installation
Install via CLI
# Default installation (asks for version if Pro license detected)
npx @moontra/moonui-cli add dialog
# Explicit version selection
npx @moontra/moonui-cli add dialog --variant=free # Install free version
npx @moontra/moonui-cli add dialog --variant=pro # Install pro version (requires license)
# Installation paths:
# - Free version: components/ui/dialog.tsx
# - Pro version: components/pro/dialog-pro.tsxUsage
Basic Usage
Pro Usage
Examples
Basic Dialog
Simple dialog with form inputs
Delete Confirmation
Destructive action confirmation dialog
Form Dialog
Complex form with multiple inputs and validation
Custom Sizes
Different dialog sizes for various content needs
Nested Dialogs
Dialog within dialog for multi-step processes
Content Variants
DialogContent exposes a variant scale that changes the border treatment of the panel: default, primary, secondary, ghost (borderless with a deeper shadow) and destructive. Pair destructive with a confirmation flow so the panel itself signals the severity of the action.
Animation Variants Showcase
Explore all available animation types including physics-based animations
Premium Features
Glassmorphism, gradients, and advanced overlay effects