> For the complete documentation index, see [llms.txt](https://docs.nickarce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nickarce.com/etch-drawer/getting-started/setup.md).

# Setup

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

## How to Import <a href="#id-1.-import-template" id="id-1.-import-template"></a>

### 1. Import Drawer

First, import the drawer component to get the component loaded in your etch site.

1. Open your `drawer.json` file in a text editor or IDE and copy its entire contents.
2. In Etch navigate to the page you want to work on
3. and paste the json you copied wherever you want the drawer to exist

### 2. Import Drawer Patterns

The drawer comes with a few premade patterns to get you started

1. navigate to the "Drawer Patterns" folder in your download file
2. Open the json file of the pattern you would like to use (examples [here](https://etch.nickarce.com/drawer-component/).)
3. Copy the contents of that json file
4. In Etch, navigate to the 'body' slot inside of the drawer you just imported and paste the json you copied from the drawer pattern.json
5. This will import the pattern directly into the drawer.

## Customizing

Drawers initialize automatically on page load. For most use cases, set props [Component Props](/etch-drawer/customization/component-props.md) in the Etch builder and you're done.

To change its change its CSS styling see [Custom CSS](/etch-drawer/customization/custom-css.md) for the options available.&#x20;

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](/etch-drawer/customization/javascript-api.md) for the full reference.