Async state

Loading, empty, and error state components for React domain setup screens. Copy them with shadcn; your app owns fetching, retries, and messages.

async-state contains three display components for common async states. They do not fetch data, retry requests, or own a transport.

import { EmptyState, ErrorState, LoadingState } from "../../registry/ui/async-state.tsx";

export default function AsyncStateExample() {
  return (
    <div className="grid gap-3">
      <LoadingState>Checking DNS…</LoadingState>
      <EmptyState>No domains connected.</EmptyState>
      <ErrorState>Could not observe DNS.</ErrorState>
    </div>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/async-state.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/async-state.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/async-state.json

bunx shadcn@latest add https://domain-kit.dev/r/async-state.json

nubx shadcn@latest add https://domain-kit.dev/r/async-state.json

aube dlx shadcn@latest add https://domain-kit.dev/r/async-state.json

Usage

<LoadingState>Checking DNS…</LoadingState>
<EmptyState>No domains connected.</EmptyState>
<ErrorState>Could not load domains. Try again.</ErrorState>

Each component also has a useful default message when no children are supplied.

API

All three components also accept the native props and className supported by the shadcn Empty root.

Keep retry actions, error details, and loading ownership in your app. If an error is related to provider authorization or DNS checks, show that context with the domain flow instead of using this component to run the lifecycle.