Modal

npx canx-ui add modal

import { Modal } from "@/components/ui/modal";
import { Button } from "@/components/ui/button";

export default function Demo() {
  return (
    <div className="flex gap-4">
      {/* Method 1: Built-in Trigger */}
      <Modal 
        id="modal-1" 
        triggerLabel="Open Project Modal" 
        title="Edit Project"
      >
        <div className="space-y-4 py-4">
          <p className="text-zinc-600">Make changes to your project here.</p>
          <div className="flex justify-end gap-2">
            <Button variant="ghost" onClick={() => document.getElementById('modal-1').close()}>Cancel</Button>
            <Button>Save Changes</Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

// Open
document.getElementById('my-modal').showModal();

// Close
document.getElementById('my-modal').close();