euedujbarrios-uiby edujbarrios
Back to components

AI Interfaces

Confidence Meter

A multi-signal confidence card for grounded AI answers, eval reviews, and release checks.

confidenceevalsignals

Installation

Copy and paste the code into your project.

Accessibility notes

Each signal includes a text value, so progress bars are not the only source of meaning.

Confidence

ready
Grounded91%
Coverage84%
Risk12%

Preview accent

TypeScript
const signals = [
  { label: "Grounded", value: "91%", width: "w-[91%]" },
  { label: "Coverage", value: "84%", width: "w-[84%]" },
  { label: "Risk", value: "12%", width: "w-[12%]" },
];

export function ConfidenceMeter() {
  return (
    <section className="w-full max-w-sm rounded-lg border border-[#40E0D0]/20 bg-white/[0.06] p-5 shadow-2xl backdrop-blur">
      <div className="flex items-center justify-between">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Confidence</p>
        <span className="rounded-full bg-[#40E0D0]/12 px-2.5 py-1 text-xs font-semibold text-[#d8fffb]">ready</span>
      </div>
      <div className="mt-4 space-y-3">
        {signals.map((signal) => (
          <div key={signal.label}>
            <div className="flex justify-between text-xs font-semibold text-slate-300">
              <span>{signal.label}</span>
              <span>{signal.value}</span>
            </div>
            <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-[#1b1b1d]">
              <div className={`${signal.width} h-full rounded-full bg-gradient-to-r from-[#40E0D0] to-[#a78bfa]`} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
Usage
<ConfidenceMeter />

Related components

I can turn that product brief into a component map, then draft the first screen.

AI Interfaces

Streaming Response Bubble

Beginner

A conversational response card with subtle animated streaming indicators.

streamingchatresponse
View component
  1. 1Parse brief
  2. 2Create variants
  3. 3Ship preview

AI Interfaces

Agent Step Timeline

Intermediate

A simple ordered timeline for AI agents, build systems, and workflow progress.

agenttimelinesteps
View component
Grounded responses should show the trail back to source material.
Source · docs/agent-interface.md

AI Interfaces

Source Citation Card

Beginner

A citation card for grounded AI responses and research-backed interfaces.

sourcecitationai
View component