Overlays

Drawer

A modal dialog attached to an edge of the viewport.

Client component6 exportsSource

Import

import { Drawer, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerHeader, DrawerTitle } from '@the_viveksingh/vivek-ui'

A panel from the edge

Same dialog machinery as Modal: focus is trapped, Escape closes, the page behind is marked inert, and focus returns to whatever opened it.

const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>New invoice</Button>

<Drawer open={open} onOpenChange={setOpen} side="end" size="md" title="New invoice">
  <DrawerHeader>
    <DrawerTitle>New invoice</DrawerTitle>
    <DrawerCloseButton />
  </DrawerHeader>
  <DrawerBody>
    <Field label="Client">
      <Input placeholder="Northwind Traders" />
    </Field>
  </DrawerBody>
  <DrawerFooter>
    <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={submit}>Create invoice</Button>
  </DrawerFooter>
</Drawer>

From the bottom

side="bottom" gives the sheet pattern that suits phones better than a side panel.

<Drawer open={open} onOpenChange={setOpen} side="bottom" size="md" title="Filters">
  {/* same parts */}
</Drawer>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Drawer
PropTypeDefaultDescription
sideDrawerSide—Edge the panel is attached to. Default `end`.
sizeDrawerSize—Panel thickness — width for `start`/`end`, height for `top`/`bottom`. Default `md`.

Exports

DrawerDrawerBodyDrawerCloseButtonDrawerFooterDrawerHeaderDrawerTitle

Rendering