Modal
View SourceSmooth transitions with proper focus management
- Uses AnimatePresence to coordinate enter/exit animations for both the backdrop and modal content.
- Modal scales in from 95% (0.95) with a fade-in effect, creating a subtle “pop” entrance.
- Backdrop fades in separately to provide visual layering and depth.
- Click outside the modal (on the backdrop) to dismiss, with stopPropagation preventing clicks inside the modal from closing it.
- Proper z-index layering ensures the backdrop (z-40) sits behind the modal content (z-50).
- Exit animations reverse the entrance: modal scales down and fades out simultaneously with the backdrop.
- Integrates with toast notifications to confirm actions when the user clicks “Confirm”.