<action-panel>
A side panel that becomes a drag-to-dismiss bottom sheet on narrow screens. Native web component, zero dependencies, ~3 kB gzipped.
Interruptible spring
Momentum dismiss
Rubber-banding
Reduced-motion aware
Try it
Wide viewport
Slides in from the right
Under 768px
Bottom sheet with a grab handle
Dismiss
Esc, backdrop, or flick it down
Last event: —
Bottom sheet, no resizing needed
The same page inside a 375px viewport — the component's own media query turns the panel into a drag-to-dismiss sheet. Open it and flick it down by the handle.
375px viewport — here the panel opens as a bottom sheet.