DNS status

A React badge that shows whether a DNS record is satisfied, missing, mismatched, or unchecked after a DNS check. Copy it with the shadcn CLI.

dns-status is a small readiness badge. It renders the status you give it; it does not observe DNS or decide what a status means for your product.

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

export default function DnsStatusExample() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <DnsStatus status="satisfied" />
      <DnsStatus status="missing" />
      <DnsStatus status="mismatch" />
      <DnsStatus status="unknown" />
      <DnsStatus tone="warning">Checking again in 5 minutes</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

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

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

Usage

status picks both the tone and the default label, so the four requirement statuses need nothing else.

<DnsStatus status="satisfied" />
<DnsStatus status="missing" />
<DnsStatus status="mismatch" />
<DnsStatus status="unknown" />
<DnsStatus tone="warning">Checking again in 5 minutes</DnsStatus>

API

dnsStatusTones and dnsStatusLabels are exported, so the copied file is where you change the wording or the colour of a status.

DnsStatus also accepts shadcn Badge props and className, except variant, which the component controls so the tone stays legible.

Keep the evidence in visible text. Colour is extra information and must never be the only way your interface says a record is missing, mismatched, or unchecked.

Boundary

The statuses match what verification reports per requirement. Observing DNS and deciding what readiness means for your product both stay in the host application; the records table reports the first for you.