Drawer

A panel that slides in from the edge — same native <dialog> as the modal, just anchored to the side and sliding instead of scaling. Focus trap, Esc and light dismiss come free.

dialogexit animations

PreviewCode

<button
  type="button"
  commandfor="drawer-cart"
  command="show-modal"
  class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
>
  Open cart
</button>

<dialog
  id="drawer-cart"
  closedby="any"
  aria-labelledby="drawer-cart-title"
  class="my-0 mr-0 ml-auto h-dvh max-h-dvh w-[min(92vw,22rem)] translate-x-full overflow-hidden rounded-l-xl border-l border-border bg-card p-0 text-card-foreground shadow-2xl overscroll-none transition-all transition-discrete duration-300 open:translate-x-0 starting:open:translate-x-full backdrop:bg-black/0 backdrop:backdrop-blur-none backdrop:overflow-hidden backdrop:overscroll-contain backdrop:transition-all backdrop:transition-discrete backdrop:duration-300 open:backdrop:bg-black/45 open:backdrop:backdrop-blur-xs starting:open:backdrop:bg-black/0 starting:open:backdrop:backdrop-blur-none"
>
  <div class="flex h-full flex-col">
    <header class="flex items-center justify-between gap-4 border-b border-border px-5 py-4">
      <div>
        <h3 id="drawer-cart-title" class="text-base font-semibold tracking-tight">Your cart</h3>
        <p class="text-sm text-muted-foreground">2 items</p>
      </div>
      <button
        type="button"
        commandfor="drawer-cart"
        command="close"
        aria-label="Close cart"
        class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
      >
        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M18 6 6 18M6 6l12 12"></path>
        </svg>
      </button>
    </header>

    <div class="flex-1 space-y-4 overflow-y-auto overscroll-none px-5 py-4">
      <div class="flex items-center gap-3">
        <div class="size-12 shrink-0 rounded-md bg-muted"></div>
        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-medium">Mechanical keyboard</p>
          <p class="text-sm text-muted-foreground">Qty 1</p>
        </div>
        <span class="text-sm font-medium">$149</span>
      </div>
      <div class="flex items-center gap-3">
        <div class="size-12 shrink-0 rounded-md bg-muted"></div>
        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-medium">Aluminium wrist rest</p>
          <p class="text-sm text-muted-foreground">Qty 1</p>
        </div>
        <span class="text-sm font-medium">$39</span>
      </div>
    </div>

    <footer class="border-t border-border px-5 py-4">
      <div class="mb-3 flex items-center justify-between text-sm">
        <span class="text-muted-foreground">Subtotal</span>
        <span class="font-semibold">$188</span>
      </div>
      <button
        class="inline-flex h-9 w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium whitespace-nowrap text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
      >
        Checkout
      </button>
    </footer>
  </div>
</dialog>

How it works

It’s the Dialog with two changes: pin it to an edge, and slide instead of scale. Everything else (top layer, focus trap, inert background, Esc, declarative open) is identical, because it’s the same native <dialog>.

my-0 mr-0 ml-auto overrides Tailwind’s zeroed dialog margins to push the panel flush against the right edge; h-dvh max-h-dvh makes it full height. Swap to ml-0 mr-auto for a left drawer, or mt-auto mb-0 w-full for a bottom sheet.
The slide: the panel sits at translate-x-full (off-screen right) by default, open:translate-x-0 brings it in, and starting:open:translate-x-full sets the entry frame. transition-all transition-discrete (transition-behavior: allow-discrete) keeps display/overlay alive so the panel slides out too, instead of vanishing.
commandfor + command="show-modal" opens it declaratively; closedby="any" gives you backdrop-click dismiss. The header’s close button is just command="close".
Inside, a flex flex-col with a fixed header and footer and a flex-1 overflow-y-auto body. Long content scrolls while the footer stays put.
The panel and that scrollable body both get overscroll-none, and the backdrop gets backdrop:overflow-hidden backdrop:overscroll-contain, so scrolling the cart to its end neither drags the page behind it nor rubber-bands the list. Needs Chrome 144+; elsewhere the background scrolls, nothing breaks.

Accessibility

Same as Dialog: focus moves into the drawer and is trapped, the page behind goes inert, Esc closes it, and focus returns to the trigger on close. Like the dialog, the panel needs an accessible name: the demo points aria-labelledby at the heading, so it announces as “Your cart”.

Reduced motion

The global prefers-reduced-motion rule in the token paste collapses the slide to an instant show/hide. The drawer still opens and closes, it just doesn’t travel.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
<dialog> elementBaseline · widely available	37	79	98	15.4	Baseline, widely available. Modal behavior, focus handling and Esc-to-close are native.
Invoker commands (commandfor / command)Baseline 2025 · newly available	135	135	144	26.2	Buttons with commandfor do nothing. Until Baseline reaches your audience, open the dialog with a 3-line shim or from your framework.
closedby="any" (light dismiss)Limited availability	134	134	141	✕	Esc still closes the dialog (platform default); clicking the backdrop does not.
Entry/exit animations (allow-discrete + @starting-style)Baseline 2024 · newly available	117	117	129	17.5	Elements appear and disappear instantly. Nothing breaks — you just lose the animation.

† @supports cannot test at-rules, so the badge checks transition-behavior: allow-discrete, which co-shipped with @starting-style in every engine.

‡ HTML feature — @supports can only test CSS, and we ship no JS to detect it, so it gets no live badge.