MoonUI

Dialog

Free + Pro

Modal dialog component with both Free and Pro versions. Free offers basic modal, Pro adds animations and effects.

Unlock Advanced Dialog Features

Get access to powerful pro features that enhance your dialog component with advanced capabilities, premium styling options, and optimized performance.

  • Both Free and Pro versions available - Choose based on your needs
  • Free: Basic modal with accessibility and keyboard navigation
  • Pro: 12+ animation variants with physics-based transitions

Pro Features

Unlock advanced capabilities with the Pro version

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)
moonui add dialog

# Explicit version selection
moonui add dialog --variant=free  # Install free version
moonui add dialog --variant=pro   # Install pro version (requires license)

# Installation paths:
# - Free version: components/ui/dialog.tsx
# - Pro version: components/pro/dialog-pro.tsx

Usage

Basic Usage

Pro Required

Pro Usage

PRO
Pro Required

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

PRO
Pro Examples

Animation Variants Showcase

PRO

Explore all available animation types including physics-based animations

Pro Required

Animation Variants Showcase

Explore all animation variants available in MoonUI Dialog Pro

default

Simple fade-in effect

fade

Smooth opacity transition

zoom

Scale from center

bounce

Bouncy spring animation

Premium Features

PRO

Glassmorphism, gradients, and advanced overlay effects

Pro Required