Cards

Cost Estimate Card

A compact billing estimate with line items for token-heavy AI runs.

costbillingtokens

Installation

Copy and paste the code into your project.

Accessibility notes

Use a definition list so each cost item keeps its label and value relationship.

Run estimate

$0.35cached

Input: $0.12
Output: $0.28
Cache: -$0.05

Preview accent

TypeScript

const lineItems = [
  { label: "Input", value: "$0.12" },
  { label: "Output", value: "$0.28" },
  { label: "Cache", value: "-$0.05" },
];

export function CostEstimateCard() {
  return (
    <section className="w-full max-w-xs rounded-lg border border-[#40E0D0]/20 bg-white/[0.06] p-5 shadow-2xl backdrop-blur">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Run estimate</p>
      <div className="mt-3 flex items-end justify-between">
        <span className="text-4xl font-black text-white">$0.35</span>
        <span className="rounded-full bg-[#40E0D0]/12 px-2.5 py-1 text-xs font-semibold text-[#d8fffb]">cached</span>
      </div>
      <dl className="mt-4 space-y-2">
        {lineItems.map((item) => (
          <div key={item.label} className="flex justify-between text-sm">
            <dt className="text-slate-400">{item.label}</dt>
            <dd className="font-semibold text-slate-100">{item.value}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}

Usage

<CostEstimateCard />

Related components

Agent SLA

Production quality

Healthy

Task success: 98.4%; Target > 97%
P95 latency: 1.8s; Target < 2.5s
Escalations: 3.2%; Target < 5%

Monthly breach budget2 / 20

Cards

Agent SLA Scorecard

Intermediate

A compact production scorecard for tracking agent success, latency, escalations, and remaining breach budget.

agentsslaobservability

View component

component.tsx

<Button glow>
  Ship it
</Button>

Cards

Copy Code Card

Beginner

A compact code surface for snippets, component recipes, and copy actions.

codecopysnippet

View component

No variants yet

Create the first prompt variant to compare quality, cost, and latency.

Cards

Empty State Panel

Beginner

A friendly empty state with a primary action for variant, file, or project creation.

emptystatecta

View component