Agent Usage Metrics

Animated dashboard card showing monthly active processing time, segmented progress bar, and an expandable cost breakdown. Includes a Working state with pulsing dot grid and shimmer pill.

CardReactFramer Motion

CSSshadcnCustom CSS

Manual

Create a file and paste the following code into it.

src/App.tsx

import { AgentUsageMetrics } from "@/components/agent-usage-metrics";

export default function App() {
  return (
    <div className="flex h-dvh w-full items-center justify-center bg-background p-6">
      <AgentUsageMetrics />
    </div>
  );
}