DNS operation

Show a single planned DNS operation with its action, record identity, value, priority, and optional reason in a compact neutral surface.

dns-operation is a presentational row for a DNS operation. It can display the create, noop, or conflict result from a plan, but it does not create a plan or authorize a mutation.

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

export default function DnsOperationExample() {
  return (
    <div className="grid gap-3">
      <DnsOperation
        action="Create"
        name="mail.example.com"
        priority={10}
        type="MX"
        value="feedback-smtp.example.net"
      />
      <DnsOperation
        action="No-op"
        name="mail.example.com"
        type="TXT"
        value="v=spf1 include:example.net ~all"
      />
      <DnsOperation
        action="Conflict"
        name="mail.example.com"
        reason="An incompatible value already exists."
        type="CNAME"
        value="app.example.net"
      />
    </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

Usage

Supply the action as your own text, badge, or icon. Keep the action and any conflict reason understandable without relying on color.

<DnsOperation
  action="Create"
  name="mail.example.com"
  priority={10}
  type="MX"
  value="feedback-smtp.example.net"
/>

API

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

Boundary

DomainKit plans remain immutable and digest-bound: dns-operation only renders the operation your host has already selected. Use Plans, authorization, and receipts for the review and apply lifecycle.