Drawer

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Drawer component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/drawer.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Include JavaScript

Copy or serve the full A3S UI JavaScript bundle.

<script src="/assets/js/all.min.js" defer></script>

Or copy or serve the A3S UI runtime and Drawer script.

<script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/drawer.min.js" defer></script>

Using CDN or bundler imports? See the Installation page.

Add your drawer HTML

A3S UI maps shadcn/ui's Vaul Drawer to a native <dialog> element. This keeps modality, focus handling, and inert page content in the browser platform. The Drawer script adds safe backdrop-click close and lets the exit animation finish before calling the native close. Drag gestures, snap points, and the drag handle are intentionally not included.

<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('demo-drawer').showModal()">Open Drawer</button>
<dialog id="demo-drawer" class="drawer" aria-labelledby="demo-drawer-title" aria-describedby="demo-drawer-description">
  <article>
    <header class="mx-auto w-full max-w-sm">
      <h2 id="demo-drawer-title">Move Goal</h2>
      <p id="demo-drawer-description">Set your daily activity goal.</p>
    </header>
    <section class="px-4">
      <div class="mx-auto w-full max-w-sm">
        <div class="flex items-center justify-center gap-6">
          <button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Decrease">...</button>
          <div class="text-center">
            <div class="text-7xl font-bold">350</div>
            <div class="text-muted-foreground text-xs uppercase">Calories/day</div>
          </div>
          <button type="button" class="btn rounded-full" data-variant="outline" data-size="icon-sm" aria-label="Increase">...</button>
        </div>
      </div>
    </section>
    <footer class="mx-auto w-full max-w-sm">
      <button type="button" class="btn" onclick="this.closest('dialog').close()">Submit</button>
      <button type="button" class="btn" data-variant="outline" onclick="this.closest('dialog').close()">Cancel</button>
    </footer>
  </article>
</dialog>

HTML structure

<button type="button" onclick="drawer.showModal()"> Optional

Trigger button. A3S UI intentionally uses the native HTMLDialogElement.showModal() method.

<dialog class="drawer" data-side="bottom|top|left|right">

Native modal drawer. Omit data-side for the default bottom drawer. Add aria-labelledby and aria-describedby when title and description are present. JavaScript adds the data-drawer-initialized flag and manages animated close behavior.

<article>

Drawer content surface.

<header> Optional: Drawer header with a title and optional description.
<section> Optional: Scrollable body/content area.
<footer> Optional: Action area pinned after the drawer body.

Examples

Sides

Use data-side to set the viewport side. Available values are top, right, bottom, and left.

Scrollable content

Keep actions visible while the drawer body scrolls.

RTL

Drawer sides are physical viewport sides. Content spacing and text alignment follow document direction.

#Drawer

#Usage

Include CSS

Include JavaScript

Add your drawer HTML

#HTML structure

#Examples

#Sides

#Scrollable content

#RTL

Drawer

Usage

HTML structure

Examples

Sides

Scrollable content

RTL