Cards

Usage Sparkline Card

A compact usage chart card for token volume, traffic, or event trends.

usagesparklinemetrics

Installation

Copy and paste the code into your project.

Accessibility notes

Include the numeric trend as text because the bars are decorative.

Usage trend

12.4k+18%

Preview accent

TypeScript

const bars = ["h-5", "h-8", "h-6", "h-10", "h-7", "h-12", "h-9"];

export function UsageSparklineCard() {
  return (
    <section className="w-full max-w-xs rounded-lg border border-white/12 bg-[#0b0f14]/86 p-5 shadow-2xl">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Usage trend</p>
      <div className="mt-4 flex h-16 items-end gap-2">
        {bars.map((bar, index) => (
          <span key={`${bar}-${index}`} className={`${bar} flex-1 rounded-t bg-gradient-to-t from-[#40E0D0] to-[#a78bfa]`} />
        ))}
      </div>
      <div className="mt-4 flex items-end justify-between">
        <span className="text-3xl font-black text-white">12.4k</span>
        <span className="rounded-full bg-[#40E0D0]/12 px-2.5 py-1 text-xs font-semibold text-[#d8fffb]">+18%</span>
      </div>
    </section>
  );
}

Usage

<UsageSparklineCard />

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