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.

Live preview

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>

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use Modal in your own app.

← Previous

Toast

Sheet