Sheet

Extends the Dialog component to display content that complements the main content.

tsx

1
2
3
4
5
6
7
8
9
10<Sheet>
  <SheetTrigger for="edit"><Button variant="outline">Edit</Button></SheetTrigger>
  <SheetContent id="edit" side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile.</SheetDescription>
    </SheetHeader>
    {/* form */}
  </SheetContent>
</Sheet>

Sheet is a side panel that slides in from an edge (right by default; top, left and bottom are also available). Used for: side-panel editing, advanced filters, an e-commerce cart, mobile navigation.

Compare with Dialog (centered modal) and Drawer (mobile bottom sheet with a drag handle). Sheet is the desktop format for variable-length content that does not break the workflow.

Installation

Terminal

$ bext ui add sheet

Copy and paste the following into src/components/ui/sheet.tsx.

sheet.tsx

1
2
3
4
5
6
7
8
9
10<Sheet>
  <SheetTrigger for="edit"><Button variant="outline">Edit</Button></SheetTrigger>
  <SheetContent id="edit" side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile.</SheetDescription>
    </SheetHeader>
    {/* form */}
  </SheetContent>
</Sheet>

This component is interactive. Make sure the shared island is loaded (see Islands). It reacts to data-ui="sheet" hooks.

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@bext-stack/ui/primitives"

<Sheet>
  <SheetTrigger for="edit-sheet">
    <Button variant="outline">Edit</Button>
  </SheetTrigger>
  <SheetContent id="edit-sheet" side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Make changes to your profile.</SheetDescription>
    </SheetHeader>
    {/* form fields */}
  </SheetContent>
</Sheet>

Anatomy

<Sheet>
  ├── <SheetTrigger for="sheet-id">
  │   └── <Button>Open</Button>
  └── <SheetContent id="sheet-id" side="right|left|top|bottom">
      ├── <SheetHeader>
      │   ├── <SheetTitle>...</SheetTitle>
      │   └── <SheetDescription>...</SheetDescription>
      └── ...free-form content...

API Reference

SheetTrigger

Prop	Type	Default	Description
for	string	—	Matches the id of the Content.

SheetContent

Prop	Type	Default	Description
id	string	—	Matches Trigger.for.
side	"right" \| "left" \| "top" \| "bottom"	"right"	Edge the panel slides in from.
ariaLabel	string	—	Accessible name (aria-label) for a sheet that has no SheetTitle.
className	string	—	Default: fixed with inset set by side, fixed w/h, bg-background border shadow.

SheetHeader

Prop	Type	Default	Description
className	string	—	flex flex-col gap-2, at the top of the content.

SheetTitle

Prop	Type	Default	Description
id	string	—	Optional id. Without it the island generates one to build aria-labelledby.
className	string	—	<h2> text-lg font-semibold.

SheetDescription

Prop	Type	Default	Description
id	string	—	Optional id. Without it the island generates one to build aria-describedby.
className	string	—	<p> text-sm muted-foreground.

Data Attributes

Attributes you can target in custom CSS to override the style for each state.

Attribute	On	Values	Description
data-ui="open"	Trigger	data-target="#id"	Opens on click and locks page scroll.
data-state	Trigger	"open" \| "closed"	Set by the island, together with aria-haspopup="dialog", aria-expanded and aria-controls on the button inside.
data-overlay	Content (outer element)	hidden by default	Modal overlay: the island toggles its hidden attribute.
data-ui="close"	corner × button, SheetClose	—	Closes the sheet and returns focus to the trigger.
data-ui="overlay-bg"	backdrop	—	Clicking the backdrop closes the sheet.

Keyboard

Key	Action
`Enter / Space`	On the trigger: opens the sheet and moves focus to its first focusable element.
`Tab / Shift+Tab`	Moves through the focusable elements of the sheet and wraps around. Focus cannot leave the sheet while it is open.
`Escape`	Closes the sheet and returns focus to the trigger.

Accessibility

The panel has role="dialog" aria-modal="true". The island points aria-labelledby at the SheetTitle and aria-describedby at the SheetDescription, generating their ids from the content id when you give none. A sheet without a SheetTitle is named by its trigger button, or by the ariaLabel prop.

On open, focus moves to the first focusable element of the content (the corner close button only when there is nothing else). Tab and Shift+Tab are trapped inside. Escape, the close button or a backdrop click closes the sheet, and focus returns to the trigger. Page scroll is locked while the sheet is open.

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom: fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A sheet: a panel fixed to the right edge. The trigger flips an `open`
// signal that a <Show> reads to mount the backdrop + edge panel.
export default function Page() {
  return (
    <main style="max-width:640px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Sheet</h1>
      <p style="color:#64748b;margin-top:0">A signal-backed sheet: a panel fixed to the right edge via &lt;Show&gt;.</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals: fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Sheet from "../components/Sheet";

export default function Page() {
  return (
    <main style={{ maxWidth: 560, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Sheet</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A dialog whose panel slides in from the right edge.</p>
      <div style={{ marginTop: 20 }}><Sheet /></div>
    </main>
  );
}

The React idiom: same UI, for comparison.

← Separator Sidebar →

On This Page