Cards

Feedback Score Card

A reviewer feedback summary for beta launches, QA passes, and design reviews.

feedbackreviewscore

Installation

Copy and paste the code into your project.

Accessibility notes

The score labels remain readable text so the grid is understandable without color.

Feedback

Beta reviewers

128 notes

94%

Useful

89%

Clear

96%

Fast

Preview accent

TypeScript

const ratings = [
  { label: "Useful", value: "94%" },
  { label: "Clear", value: "89%" },
  { label: "Fast", value: "96%" },
];

export function FeedbackScoreCard() {
  return (
    <section className="w-full max-w-sm rounded-lg border border-[#fb923c]/22 bg-[#fb923c]/8 p-5 shadow-2xl">
      <div className="flex items-start justify-between gap-4">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#fdba74]">Feedback</p>
          <h3 className="mt-2 text-lg font-bold text-white">Beta reviewers</h3>
        </div>
        <span className="rounded-full bg-white/10 px-2.5 py-1 text-xs font-semibold text-orange-50">128 notes</span>
      </div>
      <div className="mt-4 grid grid-cols-3 gap-2">
        {ratings.map((rating) => (
          <div key={rating.label} className="rounded-md border border-white/10 bg-[#0b0f14]/55 p-3 text-center">
            <p className="text-xl font-black text-white">{rating.value}</p>
            <p className="mt-1 text-[0.65rem] font-semibold uppercase tracking-[0.14em] text-slate-500">{rating.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

Usage

<FeedbackScoreCard />

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