React

Add DomainKit React flows for connection, provisioning, verification, and cleanup. The browser talks to your authenticated transport, never the provider.

DomainKit React turns the core lifecycle into composable UI recipes. Start with the complete Domain.Flow, adopt one focused flow at a time, or build entirely from models and parts. The integration levels guide compares those paths and the host responsibilities that remain at each level.

Install the React package with its peer dependencies and opt in to the default stylesheet:

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

import { Domain, DomainKit } from "@domainkit/react";
import "@domainkit/react/styles.css";

export function DomainSetup() {
  return (
    <DomainKit.Root transport={transport}>
      <Domain.Flow domain="example.com" records={records} />
    </DomainKit.Root>
  );
}

Domain.Flow coordinates connection, plan review, apply, verification, receipt-bound cleanup, and removal of the current domain grant. DomainKit.Root runs the host transport layer through Effect Atom. The package never receives provider credentials in the browser; every operation goes through your authenticated transport.

React 19 is required.

Surfaces

Surface	Use it when
`Domain.Flow`	You want the complete lifecycle in one component
`Connection.Flow`	You only need provider connection and reuse
`Provisioning.Flow`	Your product already owns the surrounding domain screen
`Records.Table` / `Records.Card`	You want presentational DNS records without a transport
Hooks and semantic parts	Your design system owns structure and interaction chrome

Server rendering is supported. Clipboard access, downloads, and navigation occur only from browser interactions.

Integration levels

Compare complete screens, focused flows, model hooks, and low-level parts.

Workshop

Exercise every shipped story, theme, provider, lifecycle state, and record control.

Transport

Map authenticated endpoints into the browser-safe transport contract.

Composition

Bring your own components, icons, messages, provider marks, and design tokens.

Shadcn registry

Copy model-free DNS presentation components directly into your application.

Keep the host boundary explicit

The React package owns interaction recipes and client-side orchestration. Your application still owns authentication, authorization, durable attempts, secrets, provider credentials, and the server-side Transport implementation. See Integrate with your host application for the end-to-end boundary.