Agent Card
AI agent status card.
import { ArrowRight, Bot } from "lucide-react";
import { AgentCard } from "@/registry/new-york/items/manpowerhub-agent-card/components/agent-card";
export function ManpowerhubAgentCardBasic() { return ( <div className="w-full max-w-sm p-2"> <AgentCard name={ <> <Bot className="size-3.5" /> Planning Agent </> } icon={<ArrowRight className="size-3.5" />} description="Auto-allocates workers across sites based on skills, availability, and SLAs." progressLabel="Deployments today" progressValue="142 / 200" progressPercent={71} stat="Active 24/7 · Operations" /> </div> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/agent-card.tsx
import * as React from "react";
import { cn } from "@/lib/utils";import { Progress } from "@/components/ui/progress";
function LiveDot({ className }: { className?: string }) { return ( <span className={cn( "size-[5px] animate-pulse rounded-full bg-[var(--green)]", className, )} /> );}
export interface AgentCardProps extends React.ComponentProps<"div"> { name: React.ReactNode; icon?: React.ReactNode; description: React.ReactNode; live?: boolean; progressLabel?: string; progressValue?: string; progressPercent?: number; progressVariant?: React.ComponentProps<typeof Progress>["variant"]; stat?: React.ReactNode;}
function AgentCard({ className, name, icon, description, live = true, progressLabel, progressValue, progressPercent, progressVariant = "brand", stat, ...props}: AgentCardProps) { return ( <div data-slot="agent-card" className={cn( "relative overflow-hidden rounded-[var(--r-lg)] border border-border bg-card p-4 transition-[border-color,box-shadow] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-[var(--brand)] before:opacity-0 before:transition-opacity hover:border-[var(--brand-border)] hover:shadow-[0_0_0_1px_var(--brand-border),0_4px_20px_rgba(16,185,129,0.08)] hover:before:opacity-100", className, )} {...props} > <div className="mb-2 flex items-center justify-between"> <div className="flex items-center gap-1.5 text-[13px] font-semibold text-foreground [&_svg]:size-3.5 [&_svg]:text-[var(--brand)]"> {icon} {name} </div> {live ? ( <div className="flex items-center gap-1.5 text-[11px] font-medium text-[var(--green)]"> <LiveDot /> Live </div> ) : null} </div> <p className="mb-3 text-xs leading-normal text-[var(--text-3)]"> {description} </p> {progressLabel != null && progressPercent != null ? ( <div className="mb-2.5"> <div className="mb-1 flex justify-between text-[11px]"> <span className="text-[var(--text-3)]">{progressLabel}</span> {progressValue ? ( <span className="font-medium text-[var(--text-2)]"> {progressValue} </span> ) : null} </div> <Progress value={progressPercent} variant={progressVariant} /> </div> ) : null} {stat ? ( <div className="flex items-center gap-1.5 text-[11.5px] text-[var(--text-3)]"> <LiveDot /> {stat} </div> ) : null} </div> );}
export { AgentCard, LiveDot };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this agent card:
npx shadcn@latest add @woxcn/manpowerhub-agent-card