# 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:

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

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

See the [JavaScript API](broken://pages/b01c926b55c8a12798f8c69c81b35357df1b42c6) for the full reference.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nickarce.com/etch-drawer/getting-started/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.