Overlays

Modal

Centered modal with spring entrance, optional title + description + close button. Renders through a body portal to escape backdrop-filter ancestors.

Modal is the centered modal primitive. Glass-strong panel, spring entrance, optional title, description, and onClose — the close button is wired up if you provide a handler, omitted otherwise.

Like Tooltip and Sheet, the modal renders through createPortal(document.body) so the surface escapes any backdrop-filter ancestor — a containing-block trap that breaks naive overlay implementations.

Example

tsx

import { Modal, Button } from '@kidcash/ui';

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

<Button onClick={() => setOpen(true)}>Open</Button>
<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Confirm withdrawal"
  description="$5 will be moved from savings to spending."
>
  <Button variant="primary">Confirm</Button>
</Modal>

Try it live

← Back to the playground to see Modal rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

Toast

Sheet