Multi model racePro

Parallel lanes for models answering the same prompt: tokens, time and first token per lane, and a finish marker with the place.

Markdown

On this page

ProFour models answer the same question; places, flag, tokens and time per lane.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/multi-model-race

Usage

tsx

import { MultiModelRace } from "@/components/ui/chatcn/pro/multi-model-race"

<MultiModelRace lanes={lanes} onSelect={setPicked} selectedId={picked} />

Each lane is plain data: model, status, tokens, elapsed ms, first token ms and the answer so far. Tracks are scaled to the lane with the most output, or to expectedTokens. Places are worked out from the finish times. Lanes keep the order you pass, so nothing jumps while they race.

Examples

States

ProEveryone waiting, and finished, failed and streaming lanes with a long name.

Props

Prop	Type	Notes
`lanes`	`RaceLane[]`	One per model
`expectedTokens`	`number`	Scale for the tracks. Default the current leader
`showText`	`boolean`	Last line of each answer. Default true
`onSelect`	`(id) => void`	Adds a pick button to finished lanes
`selectedId`	`string`	The picked lane, shown pressed
`labels`	`Partial<MultiModelRaceLabels>`	Every string, including the place format

Accessibility

The winner is marked by place, weight and a flag, never by color alone. A failed lane says so in words with the reason.
When the first lane finishes, a polite live region names it and its time, once.
The pick button's name starts with its visible text: "Use answer from Claude Sonnet 5.5".

Motion

Tracks grow with a 300 ms transform transition as tokens arrive; reduced motion jumps them. The streaming caret is the kit's square.