Skip to content

Model Race

CSS

One prompt across several models, with live time and cost, and the winner marked.

atlas-lwaiting
Time
0.00s
Cost
$0.0000
atlas-mwaiting
Time
0.00s
Cost
$0.0000
atlas-swaiting
Time
0.00s
Cost
$0.0000

Install

$ npx shadcn@latest add https://spotcheckui.com/r/model-race.json

No motion engine needed.

Usage

import { ModelRace } from "@/components/spotcheck/model-race"

<ModelRace
  lanes={[
    { id: "a", model: "atlas-l", text: answer, status: "streaming", ms: 1240, cost: 0.0012 },
    { id: "b", model: "atlas-s", text: fast, status: "done", ms: 890, cost: 0.0002 },
  ]}
/>

It shows whatever you pass, so run one useStream per lane and update lanes as they arrive. Screen readers hear the winner, not every token.

Props

  • lanes * RequiredRaceLane[]Default —

Keyboard

Nothing to operate: this component displays information.

Reduced motion

Numbers change at once, without rolling.