DNS status

Render an explicit DNS status tone for success, warning, danger, or neutral states while keeping evidence and policy in your application.

dns-status is a small status label with four explicit tones. It renders the meaning you provide; it does not infer status from provider responses or public DNS.

import { DnsStatus } from "../../registry/ui/dns-status.tsx";

export default function DnsStatusExample() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <DnsStatus>Not checked</DnsStatus>
      <DnsStatus tone="success">Found</DnsStatus>
      <DnsStatus tone="warning">Pending</DnsStatus>
      <DnsStatus tone="danger">Mismatch</DnsStatus>
    </div>
  );
}

Installation

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

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

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

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

Usage

<DnsStatus tone="success">Found</DnsStatus>
<DnsStatus tone="warning">Pending propagation</DnsStatus>
<DnsStatus tone="danger">Mismatch</DnsStatus>
<DnsStatus>Not checked</DnsStatus>

API

Prop	Type	Required	Description
`children`	`ReactNode`	yes	Visible status text or content.
`tone`	`"danger" \| "neutral" \| "success" \| "warning"`	no	Visual status tone; defaults to `neutral`.

DnsStatus also accepts shadcn Badge props and className, except for variant, which the component owns so its tone remains legible.

Keep the evidence or failure reason in visible text. Color is supplemental and must not be the only way your interface communicates whether a record is missing, mismatched, or still propagating.

For live provider and public-DNS observations, use the packaged Verification flow and keep your product readiness policy in the host application.