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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.