Skip to content
DomainKit
Esc
↑↓navigate↵open⌘Jpreview
On this page

Domain flow

Mount the complete connection, provisioning, verification, cleanup, and disconnect journey for one customer domain.

Domain.Flow is the highest-level React integration. It combines the same controllers and semantic parts exposed by the focused namespaces.

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

export function DomainSetup() {
  return (
    <Domain.Flow
      domain="mail.example.com"
      receiptId="receipt-1"
      records={records}
    />
  );
}

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

Usage

Place the flow inside DomainKit.Root and pass the DNS requirements produced by your product. The optional receiptId restores cleanup eligibility after the host reloads its durable state.

<DomainKit.Root transport={transportLayer}>
  <Domain.Flow domain={domain} records={records} receiptId={receiptId} />
</DomainKit.Root>

The flow does not decide identity, tenancy, consent, audit policy, or product readiness. It renders the DomainKit lifecycle returned by the host transport and emits lifecycle events after completed user-triggered mutations.

When to use it

Use Domain.Flow when the packaged card and action order fit your product. Choose Host lifecycle when your application must control surrounding layout, action placement, or readiness rules.

Accessibility

The complete flow includes tables, dialogs, status text, and action labels. Keep the default semantics when styling parts, and ensure host-provided messages remain specific about the provider, record action, and failure outcome.

API reference

Domain.Flow

PropType
domainstring

Customer domain whose complete setup lifecycle is rendered.

Typestring
receiptId?string

Previously persisted apply receipt that enables receipt-bound cleanup.

Typestring
recordsReadonlyArray<Transport.DnsRecord>

Product-owned DNS requirements to plan, display, verify, and clean up.

TypeReadonlyArray<Transport.DnsRecord>

DomainKit.Root

PropType
childrenReactNode

DomainKit components rendered inside the configured runtime boundary.

TypeReactNode
colorScheme?"dark" | "inherit" | "light"

Color scheme applied to DomainKit-owned surfaces.

Type"dark" | "inherit" | "light"
Default"inherit"
icons?Partial<Icons>

Optional replacements for the package's default action icons.

TypePartial<Icons>
marks?Provider.Marks

Provider artwork overrides keyed by provider ID.

TypeProvider.Marks
Default{}
messages?Partial<Catalog>

Optional message overrides for labels, status text, and dialogs.

TypePartial<Catalog>
navigate?(url: string) => void

Navigation function used after an OAuth authorization URL is returned.

Type(url: string) => void
Defaultbrowser navigation
onEvent?Lifecycle.Listener

Optional listener for completed user-triggered lifecycle events.

TypeLifecycle.Listener
portalContainer?HTMLElement | null

DOM container used for dialogs and popovers.

TypeHTMLElement | null
Defaultnull
theme?Theme

Optional token theme applied to DomainKit-owned surfaces.

TypeTheme
transportLayer.Layer<Transport.Service>

Host-owned transport implementation for connection and DNS lifecycle calls.

TypeLayer.Layer<Transport.Service>

See Choose an integration level before replacing complete flows with lower-level parts.

Was this page helpful?