About
A status section that reports a terminal work result (complete, failed, cancelled, blocked, or reviewable) with a title, optional detail text, and optional actions.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Outcome to your project and fits it to your theme.
Code
How Outcome is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Outcome from "@/components/ui/outcome";
export default function OutcomeDemo() {
return (
<div className="flex w-full max-w-md flex-col gap-3 p-6">
<Outcome
headingLevel={3}
id="demo-outcome-reviewable"
state={{ status: "reviewable" }}
title="Components ready for review"
>
Typechecking and the production build completed successfully.
</Outcome>
<Outcome
headingLevel={3}
id="demo-outcome-failed"
state={{ status: "failed" }}
title="Build failed"
>
Resolve the reported type error, then run the check again.
</Outcome>
</div>
);
}
More by ethandaya
View all
Plan
Status Loader