Record Card

Present one DNS record with accessible copy controls, optional priority metadata, and provider or public-DNS observation evidence.

Records.Card is a focused alternative to the records table for setup steps, narrow layouts, and record-by-record progress surfaces.

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

export function RecordCard({ record, evidence }) {
  return <Records.Card evidence={evidence} record={record} />;
}

Installation

npm install @domainkit/react domainkit effect @effect/atom-react react react-dom

pnpm add @domainkit/react domainkit effect @effect/atom-react react react-dom

yarn add @domainkit/react domainkit effect @effect/atom-react react react-dom

bun add @domainkit/react domainkit effect @effect/atom-react react react-dom

The Registry also provides model-free presentation primitives when you want to own the card markup and composition. Use the package component when you need DomainKit’s record and observation types.

Usage

Pass one DnsRecord and any evidence for its id:

<Records.Card
  record={record}
  evidence={observation.publicDns.filter((item) => item.recordId === record.id)}
/>

The card renders the record type, name, value, optional priority, copy controls, and every matching evidence item. It does not reduce multiple observations into a single product status.

Composition

Use CardHeader, CardTitle, CardContent, CopyValue, Priority, and Status when you need a different structure but want the same semantic parts and state-aware styling contract.

Accessibility

Keep the record type visible as the card title. Copy controls should announce both the action and the value. Do not communicate observation failures or pending propagation through color alone.

API reference

Records.Card

Records.Status

Records.Priority