For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/en/components/drawer.md.
A3S UI
  • English
  • v0.4.0

      • Drawer

      Drawer presents a supporting task or detail from the page edge, preserving context while providing a larger temporary workspace.

      Live preview

      Adjust daily goal

      Set your daily activity goal.

      350
      Calories/day

      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">Adjust daily 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.

      JavaScript API

      React useDrawer and the equivalent Vue composable expose native showModal() and the enhanced close(returnValue). close() waits for an exit transition no longer than 220ms and completes immediately under reduced motion.

      Examples

      Sides

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

      Live preview

      Adjust daily goal

      Set your daily activity goal.

      Completed tasks
      8 per day
      Focus time
      90 minutes
      Reminder
      Weekdays at 5:30 PM

      Adjust daily goal

      Set your daily activity goal.

      This week
      31 of 40 tasks completed
      Current streak
      4 workdays
      Recommendation
      Keep the target at 8 based on the last two weeks.

      Adjust daily goal

      Set your daily activity goal.

      Task target
      8 per day
      Focus target
      90 minutes per day
      Rest days
      Saturday and Sunday

      Adjust daily goal

      Set your daily activity goal.

      Counting rule
      Only completed and accepted tasks count.
      Carry-over
      Unfinished tasks do not count toward the next day.
      Effective date
      Saving updates today's progress immediately.

      Scrollable content

      Keep actions visible while the drawer body scrolls.

      Live preview

      Adjust daily goal

      Set your daily activity goal.

      Task target

      Complete 8 accepted tasks each day. Drafts, canceled tasks, and failed automations do not count.

      Focus target

      Accumulate 90 focused minutes. Sessions shorter than five minutes are ignored to avoid accidental tracking.

      Workdays

      Goals apply Monday through Friday. Holidays and manually marked rest days preserve the current streak.

      Reminder

      Send one reminder at 5:30 PM on workdays, unless the goal is already complete or today is a rest day.

      Scope

      Personal tasks and current team projects count. Historical tasks from archived projects are not recalculated.

      Effective date

      Saving updates today's progress immediately while preserving previous days for before-and-after comparisons.

      RTL

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

      Live preview

      نقل الهدف

      حدد هدف نشاطك اليومي.

      ٣٥٠
      سعرات حرارية/يوم