Overlays

Drawer.

A focused surface for a short task, close at hand.

LIVE PREVIEWTry it. It works.

Drag the handle down, press Escape or use the close button.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/drawer.json

Registry setup · Open the playground

Usage

<Drawer title="Project note" side="bottom"
  trigger={<Button>Open note</Button>}>
  <Field label="Title"><Input /></Field>
  <DrawerClose>Keep draft</DrawerClose>
</Drawer>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Base UI handles focus containment, Escape, outside dismissal and swiping. side: bottom | left | right. Supports optional trigger, open/defaultOpen/onOpenChange and initialFocus/finalFocus refs. Title is required; description is optional. The app owns draft state and persistence. No snap points or nested stacking API is exposed in this first version. Reduced motion removes transitions.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.