DNS table

A responsive React DNS records table with type, name, value, priority, purpose, and status columns for domain setup screens. Install with shadcn.

dns-table is a table for record data your app 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: "cname",
          name: "app.example.com",
          purpose: "Serve your site",
          status: <DnsStatus status="satisfied" />,
          type: "CNAME",
          value: "edge.acme.dev",
        },
        {
          id: "txt",
          name: "_acme.app.example.com",
          purpose: "Prove ownership",
          status: <DnsStatus status="missing" />,
          type: "TXT",
          value: "acme-verify=7f3a",
        },
      ]}
    />
  );
}

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

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

aube dlx 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 use dns-status or your own status component.

<DnsTable
  records={[
    {
      id: "cname",
      name: "app.example.com",
      purpose: "Serve your site",
      status: <DnsStatus status="satisfied" />,
      type: "CNAME",
      value: "edge.acme.dev",
    },
  ]}
/>

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.
`purpose`	`ReactNode`	no	What the record is for, shown under its name.
`status`	`ReactNode`	no	Readiness for this record, once observed.
`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 copy actions. For provider readback and public-DNS checks, use the records table instead.