Installation

DeleteResource is a <strong>block</strong> - a CLI-installed component that
you own and can customize. Unlike regular components, blocks are copied into
your project so you have full control over the code.



  **1. Initialize Kumo config (first time only)**

npx @cloudflare/kumo init

2. Install the block

npx @cloudflare/kumo add DeleteResource

3. Import from your local path

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/

Usage

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

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteZone("example.com");
      setOpen(false);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
/>
    </>
  );
}

Examples

Worker Deletion

Works with any resource type - just change the resourceType and resourceName props.

Error State

Use the errorMessage prop to show an error message.

API Reference