> 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. Paste the json you copied&#x20;
4. Move the drawer below your drawer trigger in the DOM so the drawer opening JS works correctly.

### 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. Paste the contents into Etch
5. Move the drawer below your drawer trigger in the DOM so the drawer opening JS works correctly.

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