# Top Result Card

Top Result Card [#top-result-card]

The **Top Result Card** highlights the single winning classification result: a large label, a prominent confidence dial (via `ConfidenceScoreBadge`), and a tier-tinted gradient-border glow. It is designed to pair above a `ScoredResultBarList`.

**When to use it:** any single-winner output — sentiment, intent, language detection, gesture, or the top result from `useClassifyZeroShot`.

Preview [#preview]

```tsx
'use client';

import { TopResultCard } from '@/components/top-result-card';

/**
 * Demo for the TopResultCard component, used by the docs live preview.
 * Shows a winning sentiment result with its glow treatment. Fully local.
 */
export default function TopResultCardDemo() {
  return (
    <div className="max-w-sm">
      <TopResultCard
        title="Predicted sentiment"
        label="Positive"
        score={0.93}
        description="The reviewer is overwhelmingly satisfied with the product."
      />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/results/top-result-card
```

Dependencies [#dependencies]

* **Data source:** renders the `label` + `score` (0–1) you pass — works with any backend. Recommended producer: `useClassifyZeroShot` (top result) from `@localmode/react` (optional). See [Bring your own data](/docs/bring-your-own-data#results--insights).

* `ConfidenceScoreBadge` — the radial confidence dial (installed automatically as a registry dependency)

* `clsx` + `tailwind-merge` — via the shared `cn()` util

Files installed [#files-installed]

* `top-result-card.tsx` — the component
* `confidence-score-badge.tsx` — the embedded dial
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**TopResultCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | **Required.** The winning label (sentiment, intent, language, gesture, …). |
| `score` | `number` | — | **Required.** The winning confidence score in the inclusive range 0–1. |
| `title` | `string` | `"Top result"` | Short heading above the result (e.g. "Predicted sentiment"). |
| `description` | `ReactNode` | — | Optional descriptive text shown beneath the result. |
| `thresholds` | `object` | `{ high: 0.8, medium: 0.5 }` | Tier breakpoints, forwarded to the embedded confidence badge and used to tint the glow. |

Examples [#examples]

Above a result list [#above-a-result-list]

```tsx
import { TopResultCard } from '@/components/top-result-card';
import { ScoredResultBarList } from '@/components/scored-result-bar-list';

export function Example({ results }) {
  const [top, ...rest] = [...results].sort((a, b) => b.score - a.score);
  return (
    <div className="space-y-4">
      {top && <TopResultCard title="Sentiment" label={top.label} score={top.score} />}
      <ScoredResultBarList results={rest} highlightTop={false} />
    </div>
  );
}
```

Customization [#customization]

The glow tint is derived from the score's confidence tier and applied via `box-shadow` plus a blurred radial accent, both wired to CSS variables. The card itself uses `bg-card` / `border-border` so it inherits your theme. Forward `thresholds` to keep the tier (and glow) consistent with the rest of your scored UI.