Modal

A dialog overlay built on Radix UI's Dialog primitive. Features a blurred backdrop, smooth zoom-fade animations, and a built-in close button.

Usage

import { Modal, Button } from "@bloomkit/react";
 
function Example() {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <Button variant="primary" onClick={() => setOpen(true)}>
        Open modal
      </Button>
 
      <Modal
        open={open}
        onOpenChange={setOpen}
        title="Confirm action"
        description="Are you sure you want to continue? This action cannot be undone."
      >
        <div className="flex justify-end gap-[var(--space-sm)]">
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
          <Button variant="primary" onClick={() => setOpen(false)}>Confirm</Button>
        </div>
      </Modal>
    </>
  );
}

Props

Prop	Type	Default	Description
open	boolean	—	Controls whether the modal is visible
onOpenChange	(open: boolean) => void	—	Callback fired when the modal open state changes
title	string	—	Heading rendered at the top of the modal
description	string	—	Subtext rendered below the title
children	ReactNode	—	Modal body content
className	string	""	Additional Tailwind classes applied to the dialog content panel