Sheet

<button type="button" class="btn" data-variant="outline" onclick="document.getElementById('demo-sheet').showModal()">Open Sheet</button>
<dialog id="demo-sheet" class="sheet" aria-labelledby="demo-sheet-title" aria-describedby="demo-sheet-description">
  <article>
    <form method="dialog">
      <button type="submit" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" 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-12 12" /><path d="m6 6 12 12" /></svg></button>
    </form>
    <header>
      <h2 id="demo-sheet-title">Edit profile</h2>
      <p id="demo-sheet-description">Make changes to your profile here. Click save when you're done.</p>
    </header>
    <section class="grid gap-4 px-6">
      <label class="grid gap-2">
        <span class="label">Name</span>
        <input class="input" type="text" value="Pedro Duarte" />
      </label>
      <label class="grid gap-2">
        <span class="label">Username</span>
        <input class="input" type="text" value="@peduarte" />
      </label>
    </section>
    <footer>
      <button type="button" class="btn" onclick="this.closest('dialog').close()">Save changes</button>
    </footer>
  </article>
</dialog>

Usage

Include CSS

@import "tailwindcss";
@import "5h3ll-ui/vega.css";

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

@import "tailwindcss";
@import "5h3ll-ui/base.css";
@import "5h3ll-ui/components/sheet.css";
@import "5h3ll-ui/styles/vega.css";

Include JavaScript

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

Or copy the runtime and Sheet script separately.

<script src="/assets/js/5h3ll-ui.min.js" defer></script>
<script src="/assets/js/sheet.min.js" defer></script>

Add your sheet HTML

5h3ll-ui Sheet uses native <dialog> just like Drawer, but provides the stable side-panel API that maps more directly to upstream shadcn/ui Sheet examples.

<dialog class="sheet" aria-labelledby="sheet-title" aria-describedby="sheet-description">
  <article>
    <form method="dialog">
      <button type="submit" aria-label="Close">...</button>
    </form>
    <header>
      <h2 id="sheet-title">Edit profile</h2>
      <p id="sheet-description">Make changes to your profile here.</p>
    </header>
    <section>...</section>
    <footer>
      <button type="button" class="btn">Save changes</button>
    </footer>
  </article>
</dialog>

HTML structure

<dialog class=“sheet” data-side=“right|left|top|bottom”>: Native modal sheet. Omit data-side for the default right-side sheet.
<article>: Sheet content surface.
<form method=“dialog”> Optional: Recommended close control wrapper for the top corner button.
<header>, <section>, <footer> Optional: Standard content regions for title, body, and actions.

JavaScript API

The Sheet script decorates the native dialog with:

animated close that waits for the exit transition
Escape handling through the dialog cancel event
backdrop click close without relying on extra wrappers

Examples

Sides

<div class="flex flex-wrap gap-2">
  <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('sheet-side-right').showModal()">Right</button>
  <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('sheet-side-left').showModal()">Left</button>
  <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('sheet-side-top').showModal()">Top</button>
  <button type="button" class="btn" data-variant="outline" onclick="document.getElementById('sheet-side-bottom').showModal()">Bottom</button>
</div>
<dialog id="sheet-side-right" class="sheet" aria-labelledby="sheet-side-right-title">
  <article>
    <form method="dialog"><button type="submit" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" 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-12 12" /><path d="m6 6 12 12" /></svg></button></form>
    <header><h2 id="sheet-side-right-title">Notifications</h2><p>Manage alerts and delivery methods.</p></header>
    <section class="px-6 pb-6"><p class="text-sm text-muted-foreground">Right is the default Sheet placement.</p></section>
  </article>
</dialog>
<dialog id="sheet-side-left" class="sheet" data-side="left" aria-labelledby="sheet-side-left-title">
  <article>
    <form method="dialog"><button type="submit" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" 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-12 12" /><path d="m6 6 12 12" /></svg></button></form>
    <header><h2 id="sheet-side-left-title">Navigation</h2><p>Use a left-side sheet for app navigation or filters.</p></header>
    <section class="px-6 pb-6"><p class="text-sm text-muted-foreground">This side mirrors correctly in RTL layouts.</p></section>
  </article>
</dialog>
<dialog id="sheet-side-top" class="sheet" data-side="top" aria-labelledby="sheet-side-top-title">
  <article>
    <form method="dialog"><button type="submit" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" 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-12 12" /><path d="m6 6 12 12" /></svg></button></form>
    <header><h2 id="sheet-side-top-title">Release summary</h2><p>Top sheets work well for compact summaries and announcements.</p></header>
  </article>
</dialog>
<dialog id="sheet-side-bottom" class="sheet" data-side="bottom" aria-labelledby="sheet-side-bottom-title">
  <article>
    <form method="dialog"><button type="submit" class="btn" data-variant="ghost" data-size="icon-sm" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" 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-12 12" /><path d="m6 6 12 12" /></svg></button></form>
    <header><h2 id="sheet-side-bottom-title">Quick actions</h2><p>Bottom sheets are useful on mobile-sized layouts.</p></header>
  </article>
</dialog>