Async state

Present loading, empty, and error states with simple children and Tailwind tokens, keeping asynchronous data fetching and retry policy in your host application.

async-state contains three presentation-only components for common asynchronous surfaces. 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

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 the host application. If an error is related to provider authorization or DNS observation, pair visible context with the relevant packaged flow rather than treating this component as a lifecycle state machine.