---
title: React
description: Add DomainKit React flows for connection, provisioning, verification, and cleanup. The browser talks to your authenticated transport, never the provider.
sidebar:
  label: Overview
seo:
  title: React DNS flows on a host-owned transport
---

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](/docs/react/integration-levels) 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:

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

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

<CardGroup cols={2}>
  <Card title="Integration levels" href="/docs/react/integration-levels" icon="layers">
    Compare complete screens, focused flows, model hooks, and low-level parts.
  </Card>
  <Card title="Workshop" href="/workshop" icon="play">
    Exercise every shipped story, theme, provider, lifecycle state, and record control.
  </Card>
  <Card title="Transport" href="/docs/react/transport" icon="arrow-right-left">
    Map authenticated endpoints into the browser-safe transport contract.
  </Card>
  <Card title="Composition" href="/docs/react/composition" icon="palette">
    Bring your own components, icons, messages, provider marks, and design tokens.
  </Card>
  <Card title="Shadcn registry" href="/docs/react/registry" icon="copy">
    Copy model-free DNS presentation components directly into your application.
  </Card>
</CardGroup>

## 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](/docs/guides/host-integration) for the end-to-end boundary.