Drawer

A panel that slides in from any edge of the screen. Left, right, and bottom variants - each with spring-eased entry, backdrop blur, scroll-lock, and Escape to close. The bottom drawer includes a drag handle and works great for action sheets and verification flows.

Installation

npx stepwise-ui add drawer

Side drawer

import { Drawer } from '@/components/stepwise/drawer'

const [open, setOpen] = useState(false)

<Drawer open={open} onClose={() => setOpen(false)} side="right" title="Settings">
  <p>Drawer content here.</p>
</Drawer>

Bottom drawer

Slides up from the bottom edge - a natural fit for action sheets, filters, or (paired with `OtpInput`) verification flows.

import { Drawer } from '@/components/stepwise/drawer'

const [open, setOpen] = useState(false)

<Drawer open={open} onClose={() => setOpen(false)} side="bottom" title="Action sheet">
  <p>Drawer content here.</p>
</Drawer>

Props

PropTypeDescription

open

boolean

Controls visibility.

onClose

() => void

Called on backdrop click or Escape.

side

"left" | "right" | "bottom"

Which edge the panel slides from. Default "right".

title

string

Header title. Omit to hide the header.

width

number

Width for left/right drawers (px). Default 360.

height

number | "auto"

Height for bottom drawer. Default "auto" (max 100dvh − 40px).

children

ReactNode

Content inside the drawer.