Backdrop
v1.0.1Updated 20 Jul 2026Full-page overlay surface with dark / light / blur / glass tones. Composes with dialogs, sheets, and custom overlays; supports escape + click-outside dismiss.
Preview
Live · 7 storiesDefaultOpen ↗
▸Why this is recommendedbackdropoverlayscrimfeedback+2
The default, out-of-the-box Backdrop.
Recommended for+14
- ✓Full-page spinners
- ✓Behind custom dialogs
- ✓Loading scrims
- ✓Onboarding spotlights
Tags+6
backdropoverlayscrimfeedbackmuidefault
Features+4
- Tones: dark / light / blur / glass
- Escape + click-outside dismiss
- Centered content slot
- z-index aware
Not recommended for−2
- ✕Inline loading (use Spinner)
- ✕Toasts (use Sonner)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
openVisibility
yestoneTone
—onCloseDismiss callback
—Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.