DNS table

Render plain DNS records in a responsive table with optional priority and status cells, while your application owns the data and observation policy.

dns-table is a model-free table for record data your application already has. It renders values; it does not fetch DNS, interpret evidence, or decide whether a domain is ready.

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

export default function DnsTableExample() {
  return (
    <DnsTable
      records={[
        {
          id: "mx",
          name: "mail.example.com",
          priority: 10,
          status: <DnsStatus tone="success">Found</DnsStatus>,
          type: "MX",
          value: "feedback-smtp.example.net",
        },
        {
          id: "spf",
          name: "mail.example.com",
          status: <DnsStatus tone="warning">Pending</DnsStatus>,
          type: "TXT",
          value: "v=spf1 include:example.net ~all",
        },
      ]}
    />
  );
}

Installation

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

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

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

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

Usage

Pass records with stable id values. Status content is rendered as provided, so you can compose it with dns-status or your own status component.

<DnsTable
  records={[
    {
      id: "mx",
      name: "mail.example.com",
      priority: 10,
      status: <DnsStatus tone="success">Found</DnsStatus>,
      type: "MX",
      value: "feedback-smtp.example.net",
    },
  ]}
/>

API

`DnsTable`

Prop	Type	Required	Description
`records`	`ReadonlyArray<DnsTableRecord>`	yes	Rows to render in the table.

DnsTable also accepts native div props and className for the bordered table panel.

`DnsTableRecord`

Field	Type	Required	Description
`id`	`string`	yes	Stable React key for the row.
`name`	`string`	yes	DNS record name.
`priority`	`number`	no	Optional numeric priority, such as MX 10.
`status`	`ReactNode`	no	Optional content for the status column.
`type`	`string`	yes	DNS record type, such as `TXT` or `CNAME`.
`value`	`string`	yes	DNS record value.

DnsTableRow is the row primitive used by DnsTable. It accepts record: DnsTableRecord and an optional showStatus: boolean (default false) when you need to build a custom table shell. It also accepts native tr props and className.

Composition

Use DNS status for status content and Copy value for value-level clipboard actions. For provider readback and public-DNS observation semantics, use the packaged Records component instead.