Zostel
Overlays Drawer

Drawer

A panel from the bottom, made for thumbs — drag it down to close (vaul).

Preview

Usage

tsx
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose, Button } from "zostel-ui";

<Drawer>
  <DrawerTrigger asChild><Button variant="outline">Your stay</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Your stay</DrawerTitle>
      <DrawerDescription>Check it, then confirm.</DrawerDescription>
    </DrawerHeader>
    …
    <DrawerFooter>
      <Button>Confirm</Button>
      <DrawerClose asChild><Button variant="outline">Not now</Button></DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Drawer

open / onOpenChange
Type: boolean / (open) => void
Default: —

Controlled state.

shouldScaleBackground
Type: boolean
Default: true

Scale the page behind while open.

…
Type: vaul DrawerProps
Default: —

snapPoints, dismissible, direction…