# Standings: Benchmark Tabs

> A model leaderboard on four benchmarks. Switch the tab and the same six models race to their new order.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/standings-benchmark-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/standings-benchmark-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/standings-benchmark-demo/light.png
- Registry item: https://keyframeui.com/r/standings-benchmark-demo.json
- Categories: data, chart, motion
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/standings-benchmark-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/standings.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/standings#standings-benchmark-demo

## Files

### `registry/demos/standings-benchmark-demo.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { Standings, type StandingsEntry } from "@/components/ui/standings";

const CYCLE = 3400; // ms each benchmark stays up while the tabs play by themselves

type Model = { id: string; label: string; detail: string; color: string; you?: boolean };

// Kestrel Labs' Wren 3 against five other open and hosted models, on four
// benchmarks from the same evaluation run.
const MODELS: Model[] = [
  { id: "wren", label: "Wren 3", detail: "Kestrel Labs · 32B", color: "#ff5a1f", you: true },
  { id: "halcyon", label: "Halcyon Pro", detail: "Halcyon · hosted", color: "#2563eb" },
  { id: "gannet", label: "Gannet XL", detail: "Northgate · 120B", color: "#7c3aed" },
  { id: "osprey", label: "Osprey 70B", detail: "Fernhill AI · 70B", color: "#059669" },
  { id: "marlin", label: "Marlin 2", detail: "Tidewater · 8×22B", color: "#db2777" },
  { id: "petrel", label: "Petrel Mini", detail: "Fernhill AI · 8B", color: "#d97706" },
];

type Benchmark = {
  id: string;
  label: string;
  unit: string;
  best?: "highest" | "lowest";
  max?: number;
  format: (v: number) => string;
  scores: Record<string, number>;
};

const BENCHMARKS: Benchmark[] = [
  {
    id: "reasoning",
    label: "Reasoning",
    unit: "Accuracy on 1,400 multi-step problems",
    max: 100,
    format: (v) => `${v.toFixed(1)}%`,
    scores: { halcyon: 84.1, gannet: 81.7, wren: 79.4, osprey: 76.2, marlin: 72.8, petrel: 61.5 },
  },
  {
    id: "coding",
    label: "Coding",
    unit: "Tasks passed on the first try",
    max: 100,
    format: (v) => `${v.toFixed(1)}%`,
    scores: { wren: 71.3, halcyon: 69.8, marlin: 66, gannet: 64.2, osprey: 58.9, petrel: 49.1 },
  },
  {
    id: "speed",
    label: "Speed",
    unit: "Output tokens per second",
    format: (v) => `${Math.round(v)}/s`,
    scores: { petrel: 412, wren: 268, marlin: 231, osprey: 174, halcyon: 122, gannet: 96 },
  },
  {
    id: "price",
    label: "Price",
    unit: "Dollars per million output tokens, lowest first",
    best: "lowest",
    format: (v) => `$${v.toFixed(2)}`,
    scores: { petrel: 0.4, wren: 0.9, marlin: 1.6, osprey: 2.1, gannet: 6, halcyon: 12 },
  },
];

function Mark({ color, label }: { color: string; label: string }) {
  return (
    <span
      className="grid size-full place-items-center text-[13px] font-semibold text-white"
      style={{ backgroundImage: `linear-gradient(150deg, ${color}cc, ${color})` }}
    >
      {label[0]}
    </span>
  );
}

const reducedQuery = "(prefers-reduced-motion: reduce)";

export function StandingsBenchmarkDemo() {
  const [active, setActive] = React.useState(0);
  const [picked, setPicked] = React.useState(false);
  const tabs = React.useRef<(HTMLButtonElement | null)[]>([]);
  const benchmark = BENCHMARKS[active];

  // The tabs play by themselves until a visitor picks one.
  React.useEffect(() => {
    if (picked || window.matchMedia(reducedQuery).matches) return;
    const id = window.setTimeout(() => setActive((i) => (i + 1) % BENCHMARKS.length), CYCLE);
    return () => window.clearTimeout(id);
  }, [active, picked]);

  const entries = React.useMemo<StandingsEntry[]>(
    () =>
      MODELS.map((m) => ({
        id: m.id,
        label: m.label,
        detail: m.detail,
        you: m.you,
        value: benchmark.scores[m.id],
        icon: <Mark color={m.color} label={m.label} />,
      })),
    [benchmark],
  );

  const pick = (i: number) => {
    setPicked(true);
    setActive(i);
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
    if (!step) return;
    e.preventDefault();
    const next = (active + step + BENCHMARKS.length) % BENCHMARKS.length;
    pick(next);
    tabs.current[next]?.focus();
  };

  return (
    <div className="w-full max-w-xl rounded-2xl border border-zinc-950/[0.08] bg-white text-zinc-950 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-12px_rgb(0_0_0/0.12)] dark:border-white/10 dark:bg-zinc-950 dark:text-zinc-50">
      <div className="border-b border-zinc-950/[0.07] px-5 pt-4 pb-4 dark:border-white/[0.08]">
        <div className="flex items-baseline justify-between gap-3">
          <p className="text-[13px] font-semibold tracking-[-0.01em]">Open leaderboard</p>
          <p className="text-xs text-zinc-500 dark:text-zinc-400">Run of Nov 2</p>
        </div>
        <div
          role="tablist"
          aria-label="Benchmark"
          onKeyDown={onKeyDown}
          className="mt-3 grid grid-cols-4 gap-1 rounded-full bg-zinc-100 p-1 dark:bg-white/[0.06]"
        >
          {BENCHMARKS.map((b, i) => (
            <button
              key={b.id}
              ref={(el) => {
                tabs.current[i] = el;
              }}
              type="button"
              role="tab"
              aria-selected={i === active}
              tabIndex={i === active ? 0 : -1}
              onClick={() => pick(i)}
              className={cn(
                "h-8 rounded-full text-xs font-medium transition-[background-color,color,box-shadow] duration-150 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#ff5a1f]",
                i === active
                  ? "bg-white text-zinc-950 shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)] dark:bg-zinc-800 dark:text-white"
                  : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
              )}
            >
              {b.label}
            </button>
          ))}
        </div>
        <p className="mt-3 text-xs text-zinc-500 dark:text-zinc-400">{benchmark.unit}</p>
      </div>
      <Standings
        role="tabpanel"
        aria-label={`${benchmark.label} leaderboard`}
        entries={entries}
        best={benchmark.best}
        max={benchmark.max}
        format={benchmark.format}
        change={false}
        className="px-2 pt-1 pb-2 [--standings-surface:#ffffff] dark:[--standings-surface:#09090b]"
      />
    </div>
  );
}
```