Drawer
A drawer for mobile-first flows, with drag-to-dismiss and a grab pill.
Usage
The drawer slides in from an edge and supports drag-to-dismiss (built on
Vaul). Prefer it over Dialog for touch-first
confirmation and quick-action flows; use Sheet for desktop side panels.
Compose it like Dialog: portal, overlay, and panel are yours to assemble.
For a drawer on mobile that becomes a dialog on desktop, see
Responsive Dialog.
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
DrawerPortal,
DrawerTitle,
DrawerTrigger,
} from '@epilot/spark-ui/drawer'<Drawer>
<DrawerTrigger asChild>
<Button styleVariant="surface" color="neutral">
Open Drawer
</Button>
</DrawerTrigger>
<DrawerPortal>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Boost mode</DrawerTitle>
<DrawerDescription>
Run the heat pump at full power for the next hour.
</DrawerDescription>
</DrawerHeader>
<DrawerFooter className="px-6 pb-6">
<Button>Start boost</Button>
<DrawerClose asChild>
<Button styleVariant="surface" color="neutral">
Cancel
</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerPortal>
</Drawer>The grab pill renders only for the (default) bottom direction; override it
with pillClassName. Background scaling is on by default; pass
shouldScaleBackground={false} to the root to disable it.
Examples
Directions
Set direction on the root (top, right, bottom, left; default
bottom); the panel styles itself per direction.
API Reference
Built on top of Vaul. See the Vaul documentation for the full API.