---
title: Provider row
description: "The line that heads a records card: the provider mark, the account the records go to, the one action, and disconnecting behind the row's own menu."
---

`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.

```tsx
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

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

## What it says

| State                   | The line                                  | The action    |
| ----------------------- | ----------------------------------------- | ------------- |
| Discovery named a host  | `{Provider} DNS detected`                 | Connect       |
| Connected               | `{Provider} · {account}`                  | Add N records |
| Connected with an apply | `{Provider} · {account}`                  | `N added`     |
| Read-only with a host   | `An administrator can connect {Provider}` | None          |

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](/components/registry/provider-artwork), which the row, the
connect dialog, and the domain field all draw through, so a host supplies its logos once.