Agent Status Card React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Agent Status Card is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AgentStatusCard from @/components/ui/agent-status-card.

import { AlertDialogProvider } from "@/components/ui/alert-dialog"
import { AgentStatusCard, type ToolCall } from "@/components/ui/agent-status-card"

const steps: ToolCall[] = [
  { id: "s1", name: "search_invoices", title: "Finding overdue invoices", status: "complete", durationMs: 820 },
  { id: "s2", name: "get_client_contacts", title: "Getting the contact details", status: "complete", durationMs: 410 },
  { id: "s3", name: "send_reminders", title: "Sending reminders (2 of 3)", status: "running" },
  { id: "s4", name: "update_statuses", title: "Updating the statuses", status: "pending" },
  { id: "s5", name: "send_report", title: "Sending the report", status: "pending" },
]

export function CollectionsAgent({
  onPause,
  onStop,
}: {
  onPause: () => Promise<void>
  onStop: () => Promise<void>
}) {
  return (
    <>
      <AlertDialogProvider />
      <AgentStatusCard
        name="Collections agent"
        task="Reminders for September's overdue invoices"
        status="running"
        steps={steps}
        startedAt={new Date(2026, 8, 24, 16, 38, 2)}
        logs={[{ time: new Date(2026, 8, 24, 16, 38, 5), message: "Found 3 invoices, $22,775.95 in total" }]}
        onPause={onPause}
        onStop={onStop}
        labels={{
          status: { running: "Working", paused: "On hold", complete: "Done" },
          stopTitle: (name) => `Stop ${name} now?`,
          elapsed: (duration) => `Working for ${duration}`,
        }}
      />
    </>
  )
}

Props

• namedefault ""
  ReactNode

  The agent's name, also used in the controls' accessible names and the stop dialog. Empty shows labels.untitled.

• taskdefault ""
  ReactNode

  What it is doing this run, clamped to two lines with the full text in a tooltip title.

• statusdefault "idle"
  "idle" | "queued" | "running" | "paused" | "awaiting-approval" | "complete" | "error" | "canceled"

  The run's state. It picks the badge (AGENT_STATUS_TONES: running info, paused and awaiting warning, complete success, error danger, the rest neutral), the orb's mood, the box under the progress and which controls show. In the playground Idle plays the live run and any other value forces that state.

• steps
  ToolCall[]

  The run's steps in the ToolCall shape from lib/ai-chat. The progress (done / total), Step 3 of 5 and the current step derive from them, and the Steps toggle shows them as a tool-call-timeline.

• currentStepdefault ""
  ReactNode

  Overrides the derived current step (the running or waiting step's title, the failed one, else the last finished one). It shimmers while the agent runs.

• progress
  number | null

  0 to 1, clamped; null is an indeterminate bar. Undefined derives it from steps; with no steps it is indeterminate while running and hidden otherwise.

• startedAt
  Date | string | number

  When the run started; the elapsed time counts from here (live while running or waiting).

• endedAt
  Date | string | number

  When it ended: Finished in 1 min 48 s, or Stopped after 14 s for failed and stopped runs. Ignored without startedAt.

• logs
  (AgentLogEntry | string)[]

  Log lines ({ id?, time?, level?: debug | info | warn | error, message } or plain strings). Passing an array (even empty) shows the Logs toggle with its count.

• approval
  { question: ReactNode; description?: ReactNode; approveLabel?: ReactNode; rejectLabel?: ReactNode }

  The question shown in the amber box while status is awaiting-approval, with Reject and Approve when their handlers are set.

• result
  ReactNode

  Shown in a green box with a check when the status is complete.

• error
  ReactNode

  Shown in a red box with an alert icon when the status is error.

• variantdefault "card"
  "card" | "compact" | "row"

  card: everything, for a detail page. compact: orb, name, status, current step, progress and one primary action, for a grid of agents. row: a 64px list line with a 32px orb, name and current step, a progress ring with the percent (hidden when the row is narrower than 384px), the badge and the menu.

• visualdefault "matrix-orb"
  "matrix-orb" | "fluid-orb" | "icon" | "none"

  matrix-orb: dots that think while running, listen while waiting and rest otherwise. fluid-orb: a WebGL blob that drifts while running and holds still otherwise. icon: a round Bot mark tinted by the status. Orbs only mount near the viewport.

• orbColordefault ""
  string

  A hex color for the orb. Empty follows the status tone (blue while running, green when done, red when failed, gray at rest).

• sizedefault "md"
  "sm" | "md"

  Card orb 56 / 72px and name 15 / 17px. Compact (48px orb) and row (32px) keep their sizes.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of the card and compact surfaces: 0, 12, 16 or 24px.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The progress fill and the solid buttons (Resume, Approve, Retry). Status colors stay semantic.

• colordefault ""
  string

  Any CSS color; replaces the tone.

• shimmerdefault true
  boolean

  The moving highlight on the current step while it runs (off under reduced motion; turn it off for static stills).

• showStepsdefault "toggle"
  "toggle" | "always" | "never"

  Card only: the steps timeline behind a Steps toggle, always open under the controls, or not at all.

• showLogsdefault true
  boolean

  Card only: the Logs toggle (shown when logs is an array).

• defaultStepsOpendefault false
  boolean

  Start with the steps timeline open.

• stepsOpen
  boolean

  Controlled open state of the steps panel.

• onStepsOpenChange
  (open: boolean) => void

  Called when the Steps toggle is pressed.

• defaultLogsOpendefault false
  boolean

  Start with the logs open.

• logsOpen
  boolean

  Controlled open state of the logs panel.

• onLogsOpenChange
  (open: boolean) => void

  Called when the Logs toggle is pressed.

• onPause
  () => (void | Promise<unknown>)

  Shows Pause while running. A returned promise keeps the button loading and the others disabled until it settles.

• onResume
  () => (void | Promise<unknown>)

  Shows Resume (solid) while paused.

• onStop
  () => (void | Promise<unknown>)

  Shows Stop while running, paused or queued; asks first when confirmStop is on.

• onRetry
  () => (void | Promise<unknown>)

  Shows Retry when the run failed or was stopped.

• onApprove
  () => (void | Promise<unknown>)

  Shows Approve in the approval box.

• onReject
  () => (void | Promise<unknown>)

  Shows Reject in the approval box.

• onOpen
  () => (void | Promise<unknown>)

  Shows View result when complete; in the row variant the whole row opens the agent.

• menu
  MenuEntry[]

  The ⋯ menu's entries (dropdown-menu's shape): Edit agent, Duplicate, Run history, Delete. A bottom sheet below 768px.

• confirmStopdefault true
  boolean

  Ask in an alert dialog before onStop (through useConfirm, so mount AlertDialogProvider once).

• localedefault ""
  string

  Locale for durations (1 min 58 sec in en-US), percents and counts. Empty uses UIProvider's, then the page's.

• now
  Date | number

  A fixed clock for the elapsed time (screenshots, tests, a paused run). Without it a running agent ticks on the shared ticker.

• labels
  Partial<AgentStatusCardLabels>

  Every visible and spoken string: status (one word per status, partial), untitled, pause, resume, stop, stopTitle(name), stopDescription, keepRunning, approve, reject, approvalNeeded, retry, viewResult, steps, logs, stepOf(index, total), elapsed(duration), finishedIn(duration), stoppedAfter(duration), pausedAfter(duration), noLogs, menu, cancel (the menu sheet's close button on phones), announce(name, status), actionFailed. English defaults in DEFAULT_AGENT_STATUS_CARD_LABELS.

• stepsLabels
  ToolCallTimelineLabelsInput

  Labels for the steps timeline (its status words, Approve, Retry).

• classNames
  Partial<Record<"visual" | "header" | "name" | "task" | "status" | "menu" | "current" | "progress" | "progressLabel" | "elapsed" | "approval" | "result" | "error" | "controls" | "toggles" | "steps" | "logs", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root article, merged last.

Parts

FAQ

More React AI components