Modal

# Required
npm install @kennbalino/kui

# Optional — only if you want to use CVA, cn(), or lucide icons directly
npm install class-variance-authority clsx tailwind-merge lucide-react

"use client";

import { useState } from "react";
import { Button } from "@kennbalino/kui";
import {
  Modal,
  ModalHeader,
  ModalTitle,
  ModalDescription,
  ModalContent,
  ModalFooter,
} from "@kennbalino/kui";

export default function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>

      <Modal open={open} onClose={() => setOpen(false)}>
        <ModalHeader onClose={() => setOpen(false)}>
          <ModalTitle>Modal Title</ModalTitle>
          <ModalDescription>Optional description here.</ModalDescription>
        </ModalHeader>
        <ModalContent>
          Your content goes here.
        </ModalContent>
        <ModalFooter>
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>Confirm</Button>
        </ModalFooter>
      </Modal>
    </>
  );
}

// Sizes
<Modal size="sm">Modal 1</Modal>
<Modal size="md">Modal 2</Modal>   // default
<Modal size="lg">Modal 3</Modal>
<Modal size="xl">Modal 4</Modal>

// Disable backdrop close
<Modal open={open} onClose={onClose} closeOnBackdrop={false}>
  Modal 5
</Modal>