DomainsManager

Code

import { DomainsManager, type DomainRecord } from "@fadymondy/nasaq/web";declare const domains: DomainRecord[];declare const api: { add(h: string): Promise<void>; remove(id: string): Promise<void>; recheck(id: string): Promise<void> };export const Domains = () => (  <DomainsManager    domains={domains}    cnameTarget="edge.example.com"    onAdd={(host) => api.add(host)}    onRemove={(id) => api.remove(id)}    onRecheck={(id) => api.recheck(id)}  />);

Server Tools · beta

Live examples and controls: DomainsManager in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/domains-manager.json

Connect custom domains. The add form normalises what people paste (scheme, path, case), the CNAME target they must point at is shown with a copy button, and each domain row shows its check (verified, pending, checking, failed) with the reason when it failed. Row actions: check again, make primary, remove (with a confirm). DomainChips is the compact version for tables and cards: it shows up to three domains as chips and a "+N more" chip that opens the rest. It has no backend: your callbacks talk to the server and you pass the updated domains back.

When to useCopy Anchor Link

• A site or project settings page with custom domains.
• DomainChips inside a table cell that lists domains.

When not to useCopy Anchor Link

• Editing DNS records of a zone: use DnsManagement.
• Domain purchase or registrar flows.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { DomainsManager, type DomainRecord } from "@fadymondy/nasaq/web";

declare const domains: DomainRecord[];
declare const api: { add(h: string): Promise<void>; remove(id: string): Promise<void>; recheck(id: string): Promise<void> };

export const Domains = () => (
  <DomainsManager
    domains={domains}
    cnameTarget="edge.example.com"
    onAdd={(host) => api.add(host)}
    onRemove={(id) => api.remove(id)}
    onRecheck={(id) => api.recheck(id)}
  />
);

AnatomyCopy Anchor Link

DomainsManager               data-slot="domains-manager"
├─ summary Badge             "2 of 4 verified"
├─ add form                  hostname Input + Add
├─ CNAME target              value with CopyButton
└─ DataTable                 domain (+ Primary badge), check Status (+ error), added; row menu: Check again, Make primary, Remove

DomainChips                  data-slot="domain-chips"
├─ chip x up to 3            host + check state
└─ "+N" chip                 Popover with the rest

APICopy Anchor Link

DomainsManager: every Card prop except children, plus:

DomainChips: domains ({ id, host, check, primary? }[]), max (default 3), labels, and every ul prop.

Helpers (pure, tested): normalizeHost, isValidHostname(host, { wildcard }), summarizeDomains, splitOverflow(items, max) (never hides just one).

ExamplesCopy Anchor Link

Chips in a table cell

import { DomainChips } from "@fadymondy/nasaq/web";

export const Cell = () => (
  <DomainChips domains={[{ id: "1", host: "shop.example.com", check: "verified", primary: true }]} />
);

AccessibilityCopy Anchor Link

• A check state is an icon and a word. Errors from callbacks appear under the field with role="alert".
• Remove opens an AlertDialog. The "+N more" chip is a button with a name and opens a Popover with the list.
• The row menu is also a button in the row, not only right-click.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Hostnames and the CNAME value stay left to right in their own isolate.

Styling & tokensCopy Anchor Link

• Built on Card, DataTable, Status, Badge, Popover, AlertDialog and --nq-* tokens. Target [data-slot="domains-manager"].

Do / Don'tCopy Anchor Link

• Do show why a check failed (error).
• Do tell people the CNAME target before they add the domain.
• Don't let people remove the primary domain without making another one primary first.
• Don't trust the input: validate the host again on the server.

RelatedCopy Anchor Link

• dns-management
• proxy-hosts
• cert-monitor

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-server-tools-domains-manager--docs