Modal & Drawer System Generator

Create accessible, polished modal dialogs and drawer components.

Core Workflow

1. Choose type: Modal (center), Drawer (side), Bottom Sheet
2. Setup portal: Render outside DOM hierarchy
3. Focus management: Focus trap and restoration
4. Accessibility: ARIA attributes, keyboard shortcuts
5. Animations: Smooth enter/exit transitions
6. Scroll lock: Prevent body scroll when open
7. Backdrop: Click outside to close

Base Modal Component

"use client";