Components

Modal

A dialog that grows out of the button that opened it, and shrinks back into it. Drag the header down to dismiss.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { Modal, Button } from '@vizzele/react';

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

<Button ref={trigger} onClick={() => setOpen(true)}>New project</Button>
<Modal open={open} onOpenChange={setOpen} originRef={trigger} title="New project">
  …
</Modal>

Props

Prop	Type	Default	Description
`open / onOpenChange`	`boolean / (open) => void`	—	Controlled state.
`originRef`	`RefObject<HTMLElement>`	—	Element to morph from (default: the focused element).
`title / description`	`ReactNode`	—	Accessible name and description.
`width`	`number \| string`	`520`	Max width.
`dismissible`	`boolean`	`true`	Escape, backdrop and drag-down close it.

Usage

Props

Accessibility