Cards

Empty State Panel

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

emptystatecta

Installation

Copy and paste the code into your project.

Accessibility notes

Keep the empty-state message and action visible as text.

No variants yet

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

Preview accent

TypeScript

export function EmptyStatePanel() {
  return (
    <section className="grid w-full max-w-sm place-items-center rounded-lg border border-dashed border-[#40E0D0]/30 bg-[#40E0D0]/8 p-8 text-center">
      <span className="grid h-12 w-12 place-items-center rounded-full bg-[#40E0D0]/14 text-sm font-black text-[#d8fffb]">+</span>
      <h3 className="mt-4 text-base font-bold text-white">No variants yet</h3>
      <p className="mt-2 max-w-xs text-sm leading-6 text-slate-400">Create the first prompt variant to compare quality, cost, and latency.</p>
      <button className="mt-5 rounded-full bg-[#40E0D0] px-4 py-2 text-sm font-bold text-[#0b0f14]" type="button">
        Add variant
      </button>
    </section>
  );
}

Usage

<EmptyStatePanel />

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