Cards

Pricing Tier Card

A small pricing card for open-source tiers, creator plans, and product packaging.

pricingtiersaas

Installation

Copy and paste the code into your project.

Accessibility notes

Use semantic text for price and plan details so the tier is understandable without visuals.

Creator kit

$0open source

20 components
Copy source
MIT-free remix

Preview accent

TypeScript

const perks = ["20 components", "Copy source", "MIT-free remix"];

export function PricingTierCard() {
  return (
    <section className="w-full max-w-xs rounded-lg border border-[#40E0D0]/22 bg-white/[0.06] p-5 backdrop-blur">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Creator kit</p>
      <div className="mt-3 flex items-end gap-2">
        <span className="text-4xl font-black text-white">$0</span>
        <span className="pb-1 text-sm text-slate-400">open source</span>
      </div>
      <ul className="mt-4 space-y-2 text-sm text-slate-300">
        {perks.map((perk) => (
          <li key={perk} className="flex items-center gap-2">
            <span className="h-1.5 w-1.5 rounded-full bg-[#40E0D0]" />
            {perk}
          </li>
        ))}
      </ul>
    </section>
  );
}

Usage

<PricingTierCard />

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

Run estimate

$0.35cached

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

Cards

Cost Estimate Card

Beginner

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

costbillingtokens

View component