LeaderboardPro

Ranked models with confidence intervals drawn as whiskers on one axis, honest shared ranks, a task filter and rank changes since the last run.

Markdown

On this page

ProEight models with 95% intervals; two share first. Hover a row to see its ties.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/leaderboard

Usage

tsx

import { Leaderboard } from "@/components/ui/chatcn/pro/leaderboard"

<Leaderboard
  entries={models}
  tasks={[{ id: "overall", label: "Overall" }, { id: "code", label: "Code" }]}
  highlightId="support-agent-ft"
/>

Each entry carries a score with its interval (score, lo, hi) per task. Ranks are honest: a model's rank is one plus the number of models that beat it with no overlap, so models that cannot be told apart share a rank and a bracket in the rank column ties them together. Hover or focus a row and its interval drops as a band down the plot; models outside it step back, and the footer says how many it overlaps. previousRank per task drives the change column; a model without one shows New. Up to four tasks show as a segmented control, more as a select. rankEntries is exported for your own tables.

Examples

States

ProA model not run, pairwise ratings, loading, empty and error.

Props

Prop	Type	Notes
`entries`	`LeaderboardEntry[]`	`{ id, model, detail?, scores, previousRank? }`
`tasks`	`{ id, label }[]`	The first is the default view
`task`, `defaultTask`, `onTaskChange`	`string`	The visible task
`kind`	`"share" \| "number"`	Percent scores or ratings. Default `share`
`highlightId`	`string`	Marks one entry as yours, in the accent
`scoreLabel`, `previousLabel`	`string`	Column names
`loading`	`boolean`	Static rows at the final height
`error`, `onRetry`	`ReactNode`, `() => void`	Say how to fix it

Keyboard

Key	Action
Tab	Moves through the rows; each shows its interval band
Arrow keys	Switch tasks in the task control

Accessibility

Each row is focusable and named in full: rank, ties, score, interval, overlaps and change.
Rank changes carry an arrow and a number as well as color; New is a word.
The plot keeps a left to right axis in right to left layouts.

Motion

Rows outside the hovered interval fade in 150 ms so a sweep down the board stays calm; instant under reduced motion. Switching tasks swaps rows instantly.