Overview

A gesture-driven drawer component for Etch. Supports swipe-to-close, nested stacking, non-modal notifications, and four directions. Built with vanilla JS — no framework required.

---

What it does

• Slides in from any edge: top, bottom, left, or right

• Swipe-to-close with velocity detection and over-drag dampening

• Nested stacking — open a drawer from inside another drawer

• Passive (non-modal) mode for notification-style UI

• Auto-open on page load with configurable delay and frequency control

• Fully accessible — keyboard nav, focus trap, screen reader announcements

Quick start

Drawers initialize automatically on page load. For most use cases, set props in the Etch builder and you're done.

To control a drawer from custom code, grab its instance from the DOM:

const drawer = document.querySelector('#my-drawer')._drawer;

drawer.open();
drawer.close();

See the JavaScript API for the full reference.