DNS operation

A React card showing one planned DNS change, its record, purpose, and any conflict, so customers review it before your app applies the plan.

dns-operation is a display card for one operation out of a plan. It shows what would happen; it does not build a plan, approve one, or write anything.

import { DnsOperation } from "../../registry/ui/dns-operation.tsx";

export default function DnsOperationExample() {
  return (
    <div className="grid gap-3">
      <DnsOperation
        name="app.example.com"
        operation="create"
        purpose="Serve your site"
        type="CNAME"
        value="edge.acme.dev"
      />
      <DnsOperation
        name="_acme.app.example.com"
        operation="noop"
        purpose="Prove ownership"
        type="TXT"
        value="acme-verify=7f3a"
      />
      <DnsOperation
        name="app.example.com"
        operation="conflict"
        reason="A CNAME cannot share a name with the existing A record."
        type="CNAME"
        value="edge.acme.dev"
      />
      <DnsOperation
        name="_acme.app.example.com"
        operation="delete"
        type="TXT"
        value="acme-verify=7f3a"
      />
    </div>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/dns-operation.json

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

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

bunx shadcn@latest add https://domain-kit.dev/r/dns-operation.json

nubx shadcn@latest add https://domain-kit.dev/r/dns-operation.json

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

Usage

operation is one of the four kinds a plan carries, and it picks the label.

<DnsOperation
  name="app.example.com"
  operation="create"
  purpose="Serve your site"
  type="CNAME"
  value="edge.acme.dev"
/>
<DnsOperation
  name="app.example.com"
  operation="conflict"
  reason="A CNAME cannot share a name with the existing A record."
  type="CNAME"
  value="edge.acme.dev"
/>

API

Prop	Type	Required	Description
`operation`	`"conflict" \| "create" \| "delete" \| "noop"`	yes	Which of the four plan operations this is.
`name`	`string`	yes	DNS record name.
`type`	`string`	yes	DNS record type.
`value`	`string`	yes	DNS record value.
`priority`	`number`	no	Optional numeric priority.
`purpose`	`ReactNode`	no	What the record is for, shown to the customer.
`reason`	`ReactNode`	no	Why an operation conflicts.

dnsOperationLabels is exported, so the copied file is where you change the wording of a kind.

DnsOperation also accepts the native props and className the shadcn Card root supports.

Boundary

A plan and its digest are immutable: this card renders an operation your app already holds. The review and apply steps are plans, approval, and receipts, and the plan action runs them.