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

Command palette

⌘K

Generate dashboard layout

3 actions ready · 1 agent online

Cards

Glass Command Card

Beginner

A glassmorphism command card for product shortcuts, palettes, and agent actions.

glasscommandshortcut

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

4.2k tokens

Badges

Token Usage Pill

Beginner

A compact usage indicator for token budgets, metering, and AI billing surfaces.

tokensmeterusage

View component