About
Compact workflow status badges with semantic defaults, custom states, icon and color overrides, two sizes, and an icon-only form.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Workflow Status to your project and fits it to your theme.
Code
How Workflow Status is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import {
WorkflowStatusBadge,
workflowStatuses,
} from "@/components/ui/workflow-status";
export function WorkflowStatusDemo() {
return (
<div className="flex min-h-[380px] w-full items-center justify-center p-6 sm:p-12">
<div className="flex w-full max-w-3xl flex-col items-center justify-center gap-8">
<section className="flex w-full flex-col items-center gap-3 text-center">
<p className="font-mono text-xs tracking-wider text-muted-foreground">
With labels
</p>
<div
aria-label="Workflow statuses with labels"
className="flex flex-wrap items-center justify-center gap-2"
role="list"
>
{workflowStatuses.map((status) => (
<div key={status} role="listitem">
<WorkflowStatusBadge size="sm" status={status} />
</div>
))}
</div>
</section>
<section className="flex w-full flex-col items-center gap-3 text-center">
<p className="font-mono text-xs tracking-wider text-muted-foreground">
Icon only
</p>
<div
aria-label="Icon-only workflow statuses"
className="flex flex-wrap items-center justify-center gap-2"
role="list"
>
{workflowStatuses.map((status) => (
<div key={status} role="listitem">
<WorkflowStatusBadge iconOnly size="sm" status={status} />
</div>
))}
</div>
</section>
</div>
</div>
);
}
export default WorkflowStatusDemo;
Dependencies
More by Akoder
View all
Ask AI
157
Model Picker
124