All Components

Etch Drawer

HTML drawer that feels iOS native.

Swipeable, stackable and four-directional. Ship gesture-driven modals, notifications, menus and navigation in a fraction of the time. Vanilla JS, zero framework lock-in.

$35one time, unlimited sites
Preview
14 day money back guarantee

Skip the blank canvas.

Ships with ready-made drawer patterns: a subscribe drawer and 4 navigation menus. Built with Etch and ACSS. Drop one in and make it yours.

5patterns included
  • 01Crux
    The Crux drawer pattern
  • 02Hydra
    The Hydra drawer pattern
  • 03Ara
    The Ara drawer pattern
  • 04Pavo
    The Pavo drawer pattern
  • 05Indus
    The Indus drawer pattern

Swipe to browse

Drawer 1.0 ships today.

A vanilla drawer that feels native.

Read more
— Featured
© 2026

Weekly notes on craft & design

Issue 014

Long-form essays, build logs, and a few links worth your time. Sent every Sunday.

No spam. Unsubscribe anytime.

Featured

© 2026

Notify without interrupting.

Passive Mode

Set a drawer to open automatically and behave like a gentle popup instead of a takeover. No overlay, no scroll lock, nothing blocking the page. It’s a good fit for cookie notices, announcements, or promos that shouldn’t interrupt the experience.

Nest them as deep as you want.

Nested Drawers

Open a drawer inside a drawer. The parent scales back to make room, then springs forward when the child closes. It handles focus, layering, and animation automatically. You just wire the triggers.

    Show only what you want, when you want.

    Snap Points

    Put a snap point on any element in the drawer and the drawer rests at its edge until the user drags it further. Flick it and it reads the speed, so a fast swipe closes or opens it outright.

    Resting atProduct

    Accessible out of the box.

    Screen readers, keyboard users, and focus management are handled from the start. Drawers announce themselves, trap focus correctly, and return it when they close. You ship something that works for everyone, without extra effort.

    • Esc

      Closes the topmost drawer, never the one behind it

    • Tab

      Cycles inside the open drawer only. Focus is trapped

    • Shift+Tab

      Walks back through the same trapped loop

    • On close

      Focus returns to the trigger that opened it

    • Screen reader

      The drawer announces its role, name and state

    Release Preview Video

    The release preview walks through how to use it and what’s included.

    Changelog

    What lands in your download

    An Etch-ready drawer system

    Built around ACSS, so it inherits the tokens you already have.

    Five designed patterns

    One subscribe drawer and four navigation menus, ready to edit.

    Zero dependencies

    A single self-contained JS class. No framework, no build step.

    Everything exposed as custom properties

    Background, overlay colour, transition duration, radius, handle size and more.

    Custom events at every transition

    Hook your own logic into open, close, and every state in between.

    Full documentation

    Online at docs.nickarce.com, and included with your download.

    Questions people ask before buying

    Is there documentation available?
    Yes. Full documentation is available on docs.nickarce.com and included with your download.
    Are there any JS dependencies?
    Nope. Zero dependencies. The JS is a single self-contained class with no framework requirements. It dispatches custom events at every state transition so you can hook in your own logic.
    Are there any external CSS files?
    No. Everything lives in the component’s CSS files. All visual customization is exposed through CSS custom properties: drawer background, overlay color, transition duration, border radius, handle dimensions, and more.
    How many site licenses do I get?
    You can use it on unlimited personal or client sites. I just ask that you do not share it with others, and that you encourage them to help support the continued development of components.
    Etch Drawer
    Etch Drawer$35