Provider row

A React row that shows which DNS provider serves a domain, the account the records go to, and a menu to disconnect. Install it with shadcn.

provider-row is the connection, as one line rather than a panel of its own. It states who serves the zone, names the account the records go to, and carries the single thing to do about it.

import { Domain } from "@domainkit/react";

import { ProviderRow } from "@/components/domainkit/provider-row";

import {
  PreviewRoot,
  previewDomain,
  previewMarks,
  previewRequirements,
} from "../../lib/preview-flow.tsx";

function Row({ readOnly }: { readonly readOnly?: boolean }) {
  const flow = Domain.useFlow({
    domain: previewDomain,
    requirements: previewRequirements,
    ...(readOnly === undefined ? {} : { readOnly }),
  });
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-card">
      <ProviderRow flow={flow} marks={previewMarks} />
    </div>
  );
}

export default function ProviderRowExample() {
  return (
    <PreviewRoot>
      <div className="grid gap-3">
        <Row />
        <Row readOnly />
      </div>
    </PreviewRoot>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/provider-row.json

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

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

bunx shadcn@latest add https://domain-kit.dev/r/provider-row.json

nubx shadcn@latest add https://domain-kit.dev/r/provider-row.json

aube dlx shadcn@latest add https://domain-kit.dev/r/provider-row.json

What it says

State	The line	The action
Discovery named a host	That the provider’s DNS serves the zone	The connect dialog
Connected	The provider and the account the records go to	The plan action, to add the records
Connected with an apply	The provider and the account	How many records the receipt proves
Read-only with a host	That an administrator can connect the provider	None

The words come from the message catalog, so replacing them changes the line without touching the row.

Disconnecting is behind the row’s menu, because it is the rare action and the common one must not sit beside it.

API

Prop	Type	Required	Description
`flow`	`Domain.Flow`	yes	The flow the row reports on.
`marks`	`ProviderArtwork`	no	Your artwork per provider id.
`action`	`ReactNode`	no	Replaces the one action on the right.

marks comes from provider artwork, which the row, the connect dialog, and the domain field all draw through, so a host supplies its logos once.