Shell

The dualtone card from the GEO dashboard, with a grey frame and a lifted inner card.

import { Badge } from "@/components/ui/badge";

import {
  WorkflowShell,
  WorkflowShellCard,
  WorkflowShellHeader,
} from "../components/workflow-shell";

export default function WorkflowShellExample() {
  return (
    <WorkflowShell className="w-full max-w-sm">
      <WorkflowShellHeader className="justify-between">
        AI visibility
        <Badge variant="outline">Last 7 days</Badge>
      </WorkflowShellHeader>
      <WorkflowShellCard className="flex flex-col gap-1 p-4">
        <span className="text-muted-foreground text-xs">Share of voice</span>
        <span className="text-3xl leading-none font-semibold tracking-tight tabular-nums">
          38.2%
        </span>
      </WorkflowShellCard>
      <div className="text-muted-foreground flex h-9 items-center px-3 text-xs">
        Up 4.1 points from last week
      </div>
    </WorkflowShell>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-shell

WorkflowShell is the grey frame, WorkflowShellHeader is the strip for a title and actions, and WorkflowShellCard is the lifted card that holds the content. Anything after the card sits on the frame, which works well for a footer with metrics. Nodes, template cards, outreach stats and every workflow block use it.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.