Disconnect dialog

A React dialog that disconnects a customer's DNS provider and, if they choose, removes the records DomainKit added, from one reviewed cleanup plan.

disconnect-dialog asks one question rather than two. By default, confirming removes what this domain’s apply receipt proves DomainKit created, then releases the connection. The customer can turn the removal off and release the connection alone.

import { Domain } from "@domainkit/react";

import { DisconnectDialog } from "@/components/domainkit/disconnect-dialog";

import { PreviewRoot, previewDomain, previewRequirements } from "../../lib/preview-flow.tsx";

// Hydrate on load: the preview renders nothing until its grant lands, so the island has no
// server-rendered element for the default visible trigger to observe.
export const client = "load";

function Trigger() {
  const flow = Domain.useFlow({ domain: previewDomain, requirements: previewRequirements });
  return <DisconnectDialog flow={flow} />;
}

export default function DisconnectDialogExample() {
  return (
    <PreviewRoot connected>
      <Trigger />
    </PreviewRoot>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/disconnect-dialog.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/disconnect-dialog.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/disconnect-dialog.json

bunx shadcn@latest add https://domain-kit.dev/r/disconnect-dialog.json

nubx shadcn@latest add https://domain-kit.dev/r/disconnect-dialog.json

aube dlx shadcn@latest add https://domain-kit.dev/r/disconnect-dialog.json

What it offers

The cleanup plan is built when the dialog opens, so what would be removed is on screen while the customer decides rather than after. Only an apply receipt proves DomainKit created anything, so the switch appears over records or not at all, and a plan with nothing in it goes straight to the release.

Releasing a connection takes every domain on it, so a shared connection asks which the customer meant: this domain alone detaches, and every domain ends the connection.

API

Boundary

Cleanup is separate from apply and bound to a receipt: its plan holds only the records the apply receipt names, so a record the customer wrote themselves is not in it.