Drawer

A drawer component that slides in from the edge of the screen.

tsx

1
2
3
4
5
6<Drawer>
  <DrawerTrigger for="confirm"><Button variant="outline">Open</Button></DrawerTrigger>
  <DrawerContent id="confirm">
    <div className="p-4">Contenu</div>
  </DrawerContent>
</Drawer>

Drawer — bottom sheet mobile-friendly avec drag handle. Contrairement au Sheet (desktop, slide depuis un bord), le Drawer est optimisé pour mobile : il monte depuis le bas et se referme par un swipe down.

Pour un formulaire ou un flow d'action ciblé mobile, le Drawer est plus naturel qu'un Dialog qui prend tout l'écran ou un Sheet qui glisse depuis le bord.

Installation

Terminal

$ bext ui add drawer

Usage

tsx

1
2
3
4
5
6
7
8
9
10import { Drawer, DrawerTrigger, DrawerContent } from "@bext-stack/ui/primitives"

<Drawer>
  <DrawerTrigger for="mobile-menu">
    <Button variant="outline">Open</Button>
  </DrawerTrigger>
  <DrawerContent id="mobile-menu">
    <div className="p-4">Contenu mobile-friendly</div>
  </DrawerContent>
</Drawer>

Anatomy

<Drawer>
  ├── <DrawerTrigger for="drawer-id">
  │   └── <Button>Open</Button>
  └── <DrawerContent id="drawer-id">
      └── ...contenu libre...

API Reference

DrawerTrigger

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

DrawerContent

Prop	Type	Default	Description
id	string	—	Match Trigger.for.
className	string	—	Défaut : fixed inset-x-0 bottom-0, bg-background rounded-t-lg border-t, avec drag handle en haut.

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	Modal.

Keyboard

Key	Action
`Escape`	Ferme.

Accessibility

Content porte role="dialog". Sur mobile, le drag handle est un affordance visuel mais pas nécessaire — Escape et le clic backdrop ferment aussi.

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 drawer: a panel that slides up from the bottom edge. The trigger
// flips an `open` signal that a <Show> reads to mount backdrop + 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">Drawer</h1>
      <p style="color:#64748b;margin-top:0">A signal-backed drawer: a panel anchored to the bottom 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 Drawer from "../components/Drawer";

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 }}>Drawer</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A dialog whose panel slides up from the bottom edge.</p>
      <div style={{ marginTop: 20 }}><Drawer /></div>
    </main>
  );
}

The React idiom — same UI, for comparison.

← Dialog Dropdown Menu →

On This Page