DnsManagement

Code

import { DnsManagement, type DnsRecord } from "@fadymondy/nasaq/web";declare const records: DnsRecord[];declare const api: { save(zone: string, input: unknown): Promise<void>; remove(id: string): Promise<void> };export function Dns() {  return (    <DnsManagement      zone="example.com"      records={records}      onSave={(input) => api.save("example.com", input)}      onDelete={(id) => api.remove(id)}    />  );}

Server Tools · beta

Live examples and controls: DnsManagement in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/dns-management.json

The records of one DNS zone. A DataTable with search, a type filter and paging; an add and edit dialog that checks the value against the type; a proxy switch in each row; and a confirmed delete. It does not talk to any DNS provider: your callbacks do, and you pass the updated records back.

When to useCopy Anchor Link

• A domain settings page for a product that manages customer or own DNS.
• Anywhere people edit A, AAAA, CNAME, MX, TXT, NS, SRV or CAA records.

When not to useCopy Anchor Link

• Registering domains or checking ownership: that is a different flow.
• Editing zone files as text.

ImportCopy Anchor Link

import { DnsManagement } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { DnsManagement, type DnsRecord } from "@fadymondy/nasaq/web";

declare const records: DnsRecord[];
declare const api: { save(zone: string, input: unknown): Promise<void>; remove(id: string): Promise<void> };

export function Dns() {
  return (
    <DnsManagement
      zone="example.com"
      records={records}
      onSave={(input) => api.save("example.com", input)}
      onDelete={(id) => api.remove(id)}
    />
  );
}

AnatomyCopy Anchor Link

DnsManagement                   data-slot="dns-management"
├─ toolbar                      search, type facet filter, Add record
├─ DataTable                    type, name, content, TTL, proxy, row menu (Edit, Delete)
├─ pagination
├─ record dialog                data-slot="dns-record-form": type, name, content, priority, TTL, proxy, comment
└─ delete AlertDialog

APICopy Anchor Link

DnsManagement: every div prop except children, plus:

Helpers (pure, tested): validateRecord(draft, zone, existing, editingId?), isIPv4, isIPv6, isHostname, isProxiable, needsPriority, relativeName, fqdn, formatTtl.

ExamplesCopy Anchor Link

Zone without a proxy

import { DnsManagement, type DnsRecord } from "@fadymondy/nasaq/web";

declare const records: DnsRecord[];

export const NoProxy = () => <DnsManagement zone="example.org" records={records} proxy={false} onSave={async () => {}} />;

AccessibilityCopy Anchor Link

• The table is a real <table> with sortable headers. Dialogs trap focus and return it; delete is an AlertDialog.
• Field errors are tied to the field and announced. The proxy switch has a label.
• Proxy state is a word ("Proxied", "DNS only"), not colour alone.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Names, values, IPs and TTL numbers are dir="ltr".

Styling & tokensCopy Anchor Link

• Built on DataTable, Dialog, AlertDialog, Switch, Badge and --nq-* tokens.
• Target [data-slot="dns-management"].

Do / Don'tCopy Anchor Link

• Do validate again on your server. The form only catches typing mistakes.
• Do return { error } for provider errors so they show next to the form.
• Don't turn on the proxy for MX, TXT or other types that cannot be proxied. The switch is off for them.
• Don't hand over a zone with thousands of records without server paging.

RelatedCopy Anchor Link

• DataTable
• AlertDialog
• Switch

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-server-tools-dns-management--docs