Browse Components
Sheet
Open focused tasks in a panel at the edge of the screen.
Basic
A panel at the reading end, sharing native Dialog behavior.
View Code
HTML
<button
class="btn secondary"
type="button"
data-dialog-open="details-sheet"
aria-controls="details-sheet"
aria-haspopup="dialog"
>
Open Sheet
</button>
<dialog
class="dialog sheet"
id="details-sheet"
aria-labelledby="sheet-title"
data-dialog-dismiss
>
<header class="dialog-header sheet-header">
<h2 id="sheet-title" tabindex="-1" autofocus>
Project details
</h2>
<button
class="btn secondary btn-icon sheet-close"
type="button"
data-dialog-close
aria-label="Close Sheet"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="m6 6 12 12M18 6 6 18">
</path>
</svg>
</button>
</header>
<div class="dialog-body stack">
<p>
Keep the current page in view while you explore the details.
</p>
<h3>
Website refresh
</h3>
<p class="muted">
Update the content, review the designs, and prepare the next release.
</p>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close>
Close
</button>
</footer>
</dialog>Start edge
Open at the reading start.
View Code
HTML
<button
class="btn secondary"
type="button"
data-dialog-open="details-sheet"
aria-controls="details-sheet"
aria-haspopup="dialog"
>
Open Sheet
</button>
<dialog
class="dialog sheet sheet-start"
id="details-sheet"
aria-labelledby="sheet-title"
data-dialog-dismiss
>
<header class="dialog-header sheet-header">
<h2 id="sheet-title" tabindex="-1" autofocus>
Project details
</h2>
<button
class="btn secondary btn-icon sheet-close"
type="button"
data-dialog-close
aria-label="Close Sheet"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="m6 6 12 12M18 6 6 18">
</path>
</svg>
</button>
</header>
<div class="dialog-body stack">
<p>
Keep the current page in view while you explore the details.
</p>
<h3>
Website refresh
</h3>
<p class="muted">
Update the content, review the designs, and prepare the next release.
</p>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close>
Close
</button>
</footer>
</dialog>Bottom edge
A content-sized panel suited to mobile tasks.
View Code
HTML
<button
class="btn secondary"
type="button"
data-dialog-open="details-sheet"
aria-controls="details-sheet"
aria-haspopup="dialog"
>
Open Sheet
</button>
<dialog
class="dialog sheet sheet-bottom"
id="details-sheet"
aria-labelledby="sheet-title"
data-dialog-dismiss
>
<header class="dialog-header sheet-header">
<h2 id="sheet-title" tabindex="-1" autofocus>
Project details
</h2>
<button
class="btn secondary btn-icon sheet-close"
type="button"
data-dialog-close
aria-label="Close Sheet"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="m6 6 12 12M18 6 6 18">
</path>
</svg>
</button>
</header>
<div class="dialog-body stack">
<p>
Keep the current page in view while you explore the details.
</p>
<h3>
Website refresh
</h3>
<p class="muted">
Update the content, review the designs, and prepare the next release.
</p>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close>
Close
</button>
</footer>
</dialog>Top edge
A panel at the top of the viewport.
View Code
HTML
<button
class="btn secondary"
type="button"
data-dialog-open="details-sheet"
aria-controls="details-sheet"
aria-haspopup="dialog"
>
Open Sheet
</button>
<dialog
class="dialog sheet sheet-top"
id="details-sheet"
aria-labelledby="sheet-title"
data-dialog-dismiss
>
<header class="dialog-header sheet-header">
<h2 id="sheet-title" tabindex="-1" autofocus>
Project details
</h2>
<button
class="btn secondary btn-icon sheet-close"
type="button"
data-dialog-close
aria-label="Close Sheet"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="m6 6 12 12M18 6 6 18">
</path>
</svg>
</button>
</header>
<div class="dialog-body stack">
<p>
Keep the current page in view while you explore the details.
</p>
<h3>
Website refresh
</h3>
<p class="muted">
Update the content, review the designs, and prepare the next release.
</p>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close>
Close
</button>
</footer>
</dialog>Scrolling content
The body scrolls while the title and close action stay visible.
View Code
HTML
<button
class="btn secondary"
type="button"
data-dialog-open="details-sheet"
aria-controls="details-sheet"
aria-haspopup="dialog"
>
Open Sheet
</button>
<dialog
class="dialog sheet"
id="details-sheet"
aria-labelledby="sheet-title"
data-dialog-dismiss
>
<header class="dialog-header sheet-header">
<h2 id="sheet-title" tabindex="-1" autofocus>
Project details
</h2>
<button
class="btn secondary btn-icon sheet-close"
type="button"
data-dialog-close
aria-label="Close Sheet"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="m6 6 12 12M18 6 6 18">
</path>
</svg>
</button>
</header>
<div class="dialog-body stack">
<p>
Keep the current page in view while you explore the details.
</p>
<h3>
Milestone 1
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 2
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 3
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 4
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 5
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 6
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 7
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<h3>
Milestone 8
</h3>
<p>
Review the latest work with your team, record feedback, and agree on the next steps before continuing to the following milestone.
</p>
<p class="muted">
Update the content, review the designs, and prepare the next release.
</p>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close>
Close
</button>
</footer>
</dialog>Right-to-left
Hebrew content opens at the reading end.
View Code
HTML
<button
class="btn secondary"
type="button"
data-dialog-open="details-sheet"
aria-controls="details-sheet"
aria-haspopup="dialog"
>
Open Sheet
</button>
<dialog
class="dialog sheet"
dir="rtl"
lang="he"
id="details-sheet"
aria-labelledby="sheet-title"
data-dialog-dismiss
>
<header class="dialog-header sheet-header">
<h2 id="sheet-title" tabindex="-1" autofocus>
פרטי הפרויקט
</h2>
<button
class="btn secondary btn-icon sheet-close"
type="button"
data-dialog-close
aria-label="סגירת החלונית"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="m6 6 12 12M18 6 6 18">
</path>
</svg>
</button>
</header>
<div class="dialog-body stack">
<p>
העמוד הנוכחי נשאר ברקע בזמן הצגת הפרטים.
</p>
<h3>
רענון האתר
</h3>
<p class="muted">
עדכנו את התוכן, בדקו את העיצובים והכינו את הגרסה הבאה.
</p>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close>
סגירה
</button>
</footer>
</dialog>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/field.css">
<link rel="stylesheet" href="/library/assets/dialog.css">
<link rel="stylesheet" href="/library/assets/sheet.css">
<script defer src="/library/assets/dialog.js"></script>16,920 bytes CSS including base · 2,172 bytes runtime JavaScript
Usage
Placement
Sheet defaults to the reading end. Add sheet-start, sheet-top or sheet-bottom for another edge. Side sheets fill the viewport height; top and bottom sheets size to content up to 85dvh. Customize side width with --sheet-width.
Shared dialog behavior
Uses dialog.js for focus containment, Escape, focus return, close controls and optional backdrop dismissal. Keep a visible close button. The body scrolls while the header and footer remain available. Applications own form validation and saving; closing does not imply persistence.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.