Modal Patterns
Accessible modals, dialogs, confirmation prompts, and slide-in sheets using Radix UI primitives with keyboard and focus management.
What's Included#
- Basic modal with portal rendering, Escape key, and click-outside dismissal
- Radix Dialog component with built-in accessibility and animations
- Confirmation dialog for destructive actions with loading state
- Sheet/drawer panels that slide in from any edge
- Form modals with integrated submission and state management
Usage#
Via CLI#
Loading code block...
Via AI Assistant#
Ask your AI assistant:
- "Use the modals pattern from Bootspring"
- "Apply the Bootspring modals pattern to my project"
Key Considerations#
- Always include a visible close button and support Escape key dismissal
- Trap focus within the modal while it is open for accessibility
- Lock body scroll to prevent background content from scrolling
- Render modals via portals at the document root to avoid z-index stacking issues
- Reset form state when modals close to prevent stale data on re-open