Overlays

Modal

A focus-trapped, scroll-locking dialog. Fully controlled — there's no uncontrolled mode, so visibility always lives in your state.

Modal

Preview

Usage

tsx

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

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

<Modal open={open} onOpenChange={setOpen} title="Confirm delete">
  <p>Are you sure you want to delete this item?</p>
  <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
</Modal>

Behavior

Renders via FloatingPortal + FloatingOverlay (locks body scroll) + a modal FloatingFocusManager (real focus trap).
Dismiss on Escape or backdrop click via useDismiss; always includes a close button.
Returns null when open is false.

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	—	Modal body.