ConfidenceAIPro

How sure the model is about an output, as a three bar meter and a label, with the reason in a hover card.

npx prodular-ui add confidence

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Extracted fields

Next to each value the model extracted. Hover or focus a meter to read why.

INV-88412.pdf

ExtractedHover a meter to see why

Vendor: Lumen Cloud Services; High confidence 97%
Amount: $12,480.00; High confidence 94%
Due date: November 14, 2026; Medium confidence 68%
GL account: 6120 Cloud hosting; Low confidence 41%

import { AiMark } from "@/components/ui/ai-mark"import { Button } from "@/components/ui/button"import { Confidence } from "@/components/ui/confidence"
const fields = [  {    label: "Vendor",    value: "Lumen Cloud Services",    level: "high" as const,    value01: 0.97,    why: "Based on 3 matching invoices from the same sender and tax id.",  },  {    label: "Amount",    value: "$12,480.00",    level: "high" as const,    value01: 0.94,    why: "Total on the PDF matches the sum of the 6 line items.",  },  {    label: "Due date",    value: "November 14, 2026",    level: "medium" as const,    value01: 0.68,    why: "The PDF says 14/11. Read as day then month because the vendor is in Ireland.",  },  {    label: "GL account",    value: "6120 Cloud hosting",    level: "low" as const,    value01: 0.41,    why: "No earlier invoice from this vendor had an account. Picked from similar descriptions.",  },]
export default function ConfidenceExtractedFields() {  return (    <div className="mx-auto w-full max-w-lg self-start rounded-xl border bg-card shadow-xs">      <div className="flex items-center gap-2 border-b px-4 py-3">        <h3 className="text-sm font-medium">INV-88412.pdf</h3>        <AiMark variant="badge" label="Extracted" />        <span className="ms-auto text-[13px] text-muted-foreground">Hover a meter to see why</span>      </div>      <dl className="divide-y">        {fields.map((f) => (          <div key={f.label} className="grid grid-cols-[7rem_minmax(0,1fr)_auto] items-center gap-3 px-4 py-2.5">            <dt className="text-[13px] text-muted-foreground">{f.label}</dt>            <dd className="truncate text-sm">{f.value}</dd>            <dd>              <Confidence level={f.level} value={f.value01} explanation={f.why} />            </dd>          </div>        ))}      </dl>      <div className="flex items-center gap-2 border-t px-4 py-3">        <Button size="sm">Post to ledger</Button>        <Button size="sm" variant="ghost">          Review low confidence fields        </Button>      </div>    </div>  )}

Levels

Pass a level, or a value from 0 to 1. Use hideLabel in dense tables.

High confidenceMedium confidenceLow confidence

High confidence 92%Low confidence 34%

import { Confidence, ConfidenceExplanation } from "@/components/ui/confidence"
export default function ConfidenceLevels() {  return (    <div className="flex flex-col items-center gap-6">      <div className="flex flex-wrap items-center justify-center gap-6">        <Confidence level="high" />        <Confidence level="medium" />        <Confidence level="low" />      </div>      <div className="flex flex-wrap items-center justify-center gap-6">        <Confidence value={0.92} />        <Confidence value={0.61} hideLabel explanation="Meter only. The label stays available to screen readers." />        <Confidence          value={0.34}          explanation={            <ConfidenceExplanation title="Low confidence, check this one">              The ticket mentions both billing and a login problem. Routed to Billing because the first              message asks about a charge, but Access is almost as likely.            </ConfidenceExplanation>          }        />      </div>    </div>  )}

Anatomy

<Confidence  level="high"  explanation="Based on 3 matching invoices from the same sender."/>

Guidance

Use it when

Use it next to values the model extracted, classified or predicted, where a person decides whether to trust them.
Explain the confidence in one sentence with the evidence: Based on 3 matching invoices.
Use low confidence to route people to review, for example a Review low confidence fields action.

Avoid

Showing confidence on every sentence of generated prose. It is for discrete outputs.
Exact percentages that are not calibrated. Pass a level instead of a value when the score is not meaningful.
Color alone. The label or the accessible name always says the level.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Always pass explanation with the concrete evidence behind the score. A confidence without a reason is not useful.
Pass level when the model returns a category, or value (0 to 1) when it returns a calibrated score. Defaults: 0.8 and above is high, 0.5 and above is medium.
Use hideLabel only where the column header already says Confidence. The accessible label is kept.
Never auto apply a low confidence output. Ask for review.

API

Confidence

Prop	Type	Default	Description
level	"high" \| "medium" \| "low"		Exposed as data-level.
value	number		Score from 0 to 1. Derives the level when level is not set and shows a percentage.
explanation	ReactNode		Why. A string renders in ConfidenceExplanation inside a hover card.
hideLabel	boolean	false	Show the meter only.

ConfidenceExplanation

Prop	Type	Default	Description
title	ReactNode		Replaces the level as the heading of the hover card.