Stack-Based State Management
Manage multiple popups using a centralized stack instead of scattered boolean states.
Headless Popup System
OverlayLab provides a scalable way to manage modals, drawers, and overlays using a stack-based architecture.
- Supports modals, drawers, and overlays
- Stack-based state management
- Focus trapping and accessiblity support
- Composable API with compound components
Features
Headless Architecture
Fully customizable UI with no enforced styles, giving you complete design control
Accessible by Default
Built-in focus trapping, keyboard navigation, and ARIA-compliant dialog semantics.
Composable API
Clean and scalable API using compound components for better developer experience.
Overlay & Scroll Handling
Handles outside clicks, escape key, and scroll locking automatically.
Multiple Variants
Supports modals, drawers, and responsive sidebars with shared logic.
Use Cases
OverlayLab can be used to power real-world UI interactions across different types of applications.
- Financial applications (transfer confirmations, receipts)
- Dashboard interfaces (sidebars, filters, drawers)
- Authentication flows (login, signup, OTP modals)
- E-commerce interactions (cart, checkout, quick views)
- Complex multi-step forms and workflows
Documentation
Learn how OverlayLab works.
- Stack-based state management
- Popup composition patterns
- Accessibility handling
- Overlay behavior
Understand How OverlayLab Works Under the Hood
Explore the architecture, stack system, and accessibility patterns used to build a scalable popup system from scratch.
Popup usage example
Code example
<Popup>
<Popup.Trigger>Open</Popup.Trigger>
<Popup.Content>
<Popup.Header>
<Popup.Title>Transfer</Popup.Title>
</Popup.Header>
</Popup.Content>
</Popup>