A card that shows a multi-step plan with an overall status badge and a per-step status list, used for agent/task progress displays.
import Plan from "@/components/ui/plan";
export default function PlanDemo() {
return (
<div className="flex w-full max-w-xl items-center justify-center p-6">
<Plan
id="deploy-staging"
title="Deploy staging environment"
status="active"
steps={[
{
id: "step-1",
title: "Provision infrastructure",
detail: "Create VPC, subnets, and load balancer",
status: "complete",
},
{
id: "step-2",
title: "Run database migrations",
detail: "Apply pending schema changes",
status: "active",
},
{
id: "step-3",
title: "Deploy application",
detail: "Push latest build to staging",
status: "queued",
},
{
id: "step-4",
title: "Run smoke tests",
detail: "Verify critical user flows",
status: "queued",
},
{
id: "step-5",
title: "Notify team",
detail: "Post deployment summary in #releases",
status: "skipped",
},
]}
/>
</div>
);
}
Loading preview...