Status Card

A card showing a state badge, label, and short note together. Use it on dashboards to surface health, order, or system status at a quick glance.

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export default function StatusCard() {
  return (
    <div className="max-w-md mx-auto py-6 px-4">
      <Card>
        <CardHeader className="flex flex-row items-start justify-between space-y-0">
          <div>
            <CardTitle>Project Status</CardTitle>
            <CardDescription>Current deployment status</CardDescription>
          </div>
          <Badge variant="default" className="ml-2">
            Active
          </Badge>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">Uptime</span>
              <span className="text-sm text-muted-foreground">99.9%</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">Last Deployed</span>
              <span className="text-sm text-muted-foreground">2 hours ago</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">Environment</span>
              <span className="text-sm text-muted-foreground">Production</span>
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">View Logs</Button>
          <Button>Manage</Button>
        </CardFooter>
      </Card>
    </div>
  );
}

About this block

Status Card is a single contained card for surfacing the current state of a resource at a glance. A title and short description sit in the header alongside a badge that reads the current status. The body holds a compact key/value list: uptime, last deployed time, and environment, each on its own row with the label on the left and the value on the right. Two buttons anchor the footer, one for viewing logs and one for jumping to a management view.

Every piece of that structure is independent. You can relabel the header for an AI job, a pipeline run, or an order, swap the badge text and variant to reflect any state, replace the three metadata rows with whichever fields matter, and retitle or hide either footer button without touching the rest.

When to use

Reach for this block anywhere a user needs to confirm that something is running, complete, or stalled without opening a detail page. It fits a sidebar widget on an AI assistant dashboard, the top of a model run detail view, or a grid of agent statuses on an ops screen. Compared to a plain alert or banner, this card keeps structured metadata readable next to the state label instead of flattening it into a single line.

A natural flow around it on a Components page:

Before

Badges to establish the visual vocabulary your status badge will reuse across the page
Border Accent Card as a context card above, grouping related metadata before the status summary

After

Progress Card to follow up with a usage or completion metric tied to the same resource
Alerts for inline notifications triggered by the state shown in this card

What you can display

Any resource that has a discrete state and a handful of supporting facts is a good fit. A few common uses:

AI job tracking. Show whether a model run is queued, active, or complete alongside its start time, duration, and assigned environment.
Service health. Display uptime and the last event timestamp for an API endpoint so on-call engineers see the essentials without leaving the page.
Order or request state. Surface the current stage of a fulfillment request next to the submission time and assigned handler.

Tip: keep the metadata list to three or four rows so the card stays compact; push longer details to the linked view behind the footer button.