bx

Sheet

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

tsx 
<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 — panneau latéral qui glisse depuis un bord (right par défaut, top/left/bottom aussi). Utilisé pour : édition en side panel, filtres avancés, panier ecommerce, nav mobile.

Vs Dialog (modal centré), vs Drawer (mobile bottom sheet avec drag handle). Sheet = format desktop pour du contenu de longueur variable sans casser le workflow.

Installation

Terminal 
$ bext ui add sheet

Usage

tsx 
import { 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>
      └── ...contenu libre...

API Reference

SheetTrigger

Prop Type Default Description
for string — Match l'id du Content.

SheetContent

Prop Type Default Description
id string — Match Trigger.for.
side "right" | "left" | "top" | "bottom" "right" Bord depuis lequel le panneau glisse.
className string — Défaut : fixed avec inset selon side, w/h fixe, bg-background border shadow.

SheetHeader

Prop Type Default Description
className string — flex flex-col gap-2, en haut du contenu.

SheetTitle

Prop Type Default Description
className string —

text-lg font-semibold.

SheetDescription

Prop Type Default Description
className string —

text-sm muted-foreground.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
data-ui="toggle-pop" Trigger data-target="#id" Cliquer ouvre.
data-overlay Content hidden par défaut Modal — bloque le scroll body à l'ouverture.
data-side Content "right" | "left" | "top" | "bottom" Utilisé par le CSS pour appliquer les transforms de slide-in.

Keyboard

Key Action
Escape Ferme.
Tab Focus trap dans le sheet.

Accessibility

Content porte role="dialog" aria-modal="true". Ajouter aria-labelledby vers l'id du SheetTitle et aria-describedby vers l'id de la Description.

Focus déplacé sur le premier élément focusable à l'ouverture. Escape / clic backdrop referme et le focus revient au trigger.

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
Pure PRISM + real bext signals — fine-grained, no re-render.
← Separator Sidebar →