emilkowalski/vaul
Vaul
Vaul is a React drawer component used to create accessible, draggable bottom sheets and slide-up panels. It serves as a mobile-friendly alternative to traditional dialogs and modals by rendering content into a separate DOM node via a portal to avoid layout nesting issues.
The library features configurable snap points that allow panels to lock into specific vertical heights during drag gestures. It supports hierarchical UI layering, enabling the use of nested drawers for complex navigation or multi-level menus.
The component includes an accessibility layer with ARIA announcements and focus management for screen readers. Additional capabilities cover programmatic visibility control, dismissal restrictions, and automatic position adjustments to maintain content visibility when virtual keyboards are active.
Features
- Sliding Panels - Implements draggable sliding panels as a mobile-friendly alternative to traditional dialogs and modals.
- Mobile Bottom Sheets - Provides a mobile-friendly slide-up panel as an accessible alternative to traditional dialogs.
- Accessibility Layers - Implements a dedicated accessibility layer to manage semantic roles and focus states for screen readers.
- Bottom Sheets - Implements a draggable bottom sheet with configurable snap points for supplementary content.
- React Components - Built as a reusable React component integrating portals and state management.
- Drawer Components - Provides a high-quality React drawer component for mobile-friendly interfaces.
- Gesture-Based Dismissal - Provides gesture-based dismissal and vertical offset interpolation for smooth panel sliding.
- Nested Layers - Supports hierarchical UI layering by enabling the use of nested drawers for complex navigation.
- Overlay Interaction Design - Provides a native app-like feel through draggable panels and precise gesture controls.
- Edge-Sliding Overlays - Provides a sliding screen overlay that serves as a mobile-friendly replacement for standard dialog boxes.
- Portal Rendering - Uses portal rendering to mount the drawer into a separate DOM node to avoid layout constraints.
- Snap Points - Implements configurable snap points where the panel locks during drag gestures.
- Keyboard-Aware Behavior - Automatically adjusts the position of the bottom sheet when the virtual keyboard appears.
- Accessibility Announcements - Announces semantic titles and descriptions to screen readers upon opening the drawer.
- Drawer State Controllers - Provides programmatic controls to manage the open and closed states of the drawer via external triggers.
- Dismissal Restrictions - Prevents drawers from closing via clicks or gestures to ensure the user completes an action.
- Overlay State Managers - Manages the visibility and interaction blocking of the background overlay based on the drawer state.
- Mobile Accessibility Support - Ensures mobile accessibility compliance through screen-reader support and focus management.
- Background Interaction Blocking - Blocks or allows background interactions to manage user focus while the drawer is open.
- Keyboard-Relative Positioning - Provides automatic position adjustments to keep content visible when a virtual keyboard is active.
- Nested Navigation Menus - Supports nested drawer systems for creating hierarchical navigation paths on mobile screens.
- Drawer Dismissal Logic - Allows configuring whether a drawer closes via overlay interaction or requires a manual handle drag.
- Accessible Floating Overlays - Offers a floating overlay UI with built-in ARIA announcements and focus management.
