Overlays

Drawer

A slide-in panel anchored to a viewport edge — same focus-trapped, scroll-locking interaction as Modal, animated in from the side instead of appearing centered.

Drawer

Preview

Usage

tsx

import { Drawer, Button } from "@vesture/react";

const [open, setOpen] = useState(false);

<Drawer open={open} onOpenChange={setOpen} title="Notification settings" side="right">
  <p>Manage how you receive updates about activity on your account.</p>
  <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
</Drawer>

Behavior

Same FloatingPortal + FloatingOverlay (locks body scroll) + modal FloatingFocusManager as Modal — a real focus trap, not just an overlay.
Dismiss on Escape or backdrop click via useDismiss; always includes a close button.
Stays mounted through its exit transition — closing slides the panel back off-screen before it's removed, rather than vanishing instantly.

Props

Prop	Type	Default	Description
open	boolean	—	Required. Controls visibility.
onOpenChange	(open: boolean) => void	—	Required. Fires on dismiss requests.
title	ReactNode	—	Optional heading, wired to aria-labelledby.
children	ReactNode	—	Drawer body.
side	"left" \| "right" \| "top" \| "bottom"	"right"	Edge the panel slides in from.
size	string \| number	"360px"	Width when side is left/right, height when side is top/bottom.