Outcome

A failed step in the message catalog's words: a heading the customer reads first, what to do about it, and the retry the surface allows, as a card or one line.

outcome renders a DomainKit.Error. The title and the description come from the error’s reason through the catalog, so nothing renders a tag, a status literal, or a reason name.

import { Connect } from "@domainkit/react";
import { useEffect } from "react";

import { Outcome } from "@/components/domainkit/outcome";

import { PreviewRoot, previewDomain } from "../../lib/preview-flow.tsx";

/** The failure is real: the fake provider turns down an empty token. */
function Failed() {
  const controller = Connect.useController({ domain: previewDomain });
  const connect = controller.connect;
  useEffect(() => {
    connect({ method: "token", provider: "meridian", values: { token: "" } });
  }, [connect]);
  const error = controller.state._tag === "Failure" ? controller.state.error : null;
  return (
    <div className="grid gap-4">
      <Outcome context={{ provider: "Meridian DNS" }} error={error} onRetry={controller.retry} />
      <Outcome context={{ provider: "Meridian DNS" }} error={error} layout="inline" />
    </div>
  );
}

export default function OutcomeExample() {
  return (
    <PreviewRoot>
      <Failed />
    </PreviewRoot>
  );
}

Installation

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

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

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

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

Usage

<Outcome
  context={{ domain, provider: "Cloudflare" }}
  error={state._tag === "Failure" ? state.error : null}
  onRetry={controller.retry}
/>

The reason alone cannot name the provider a customer typed a token for, so the surface supplies it in context.

API

Prop	Type	Required	Description
`error`	`DomainKit.Error \| null`	yes	The failure, or `null` when the step is fine.
`context`	`Messages.OutcomeContext`	no	The provider and domain the words may name.
`onRetry`	`(() => void) \| null`	no	The retry to offer, or none.
`layout`	`"card" \| "inline"`	no	A panel of its own, or a line under a field.

Boundary

A retry is a write, so a read-only surface passes null and the outcome offers none. What is retryable is on the error itself: read isRetryable rather than matching on words.