---
title: Components
description: "React components for custom domain setup: a full flow, a DNS records table, and status badges. Copy them into your app with shadcn and preview them live."
sidebar:
  label: Overview
seo:
  title: React components for custom domain setup
---

Everything on these pages is a file you copy into your project. `@domainkit/react` supplies the
behaviour, the state, the copy, and the accessibility; the registry supplies the markup, written
against your own kit.

The previews run the real lifecycle against an in-memory server, so clicking through them behaves
the way a real integration does.

## The flow

**[Domain flow](/components/registry/domain-flow)**

The whole of one domain's setup, on one hook.

**[Provider row](/components/registry/provider-row)**

Who serves the zone, and the one action.

**[Records table](/components/registry/records-table)**

The records to add, and where each one stands.

**[Plan action](/components/registry/plan-action)**

Approve a plan's digest and apply it in one press.

**[Connect dialog](/components/registry/connect-dialog)**

A provider's methods, one decision at a time.

**[Disconnect dialog](/components/registry/disconnect-dialog)**

Release a provider and remove what it holds.

**[Domain field](/components/registry/domain-field)**

One input over every zone your accounts reach.

**[Outcome](/components/registry/outcome)**

A failed step in the catalog's words.

**[Provider artwork](/components/registry/provider-artwork)**

Your logo per provider, with no tile around it.

## The display components

These take plain props and import no DomainKit runtime, for a product that already has its own
state.

**[Registry overview](/components/registry)**

What the copied components are, and where the boundary sits.

**[DNS table](/components/registry/dns-table)**

DNS records in a compact table.

**[DNS operation](/components/registry/dns-operation)**

One planned create, no-op, conflict, or delete.

**[DNS status](/components/registry/dns-status)**

A compact status label.

**[Provider mark](/components/registry/provider-mark)**

An accessible wrapper for provider artwork.

**[Copy value](/components/registry/copy-value)**

A DNS value with a copy action.

**[Async state](/components/registry/async-state)**

Loading, empty, and error states.

Start with the [React overview](/docs/react) to see what the hooks behind these files hand you.