---
title: DNS status
description: 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.

```tsx
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

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

## Usage

```tsx
<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](/components/verification)
flow and keep your product readiness policy in the host application.