# Benchmark Race

Benchmark bars that race to their results on view with numbers counting alongside; tabs switch the measure, bars travel straight to new lengths and rows re-sort so the best result leads.

- Page and source: https://uibrik.com/components/benchmark-race
- Install: `npx shadcn@latest add https://uibrik.com/r/benchmark-race.json`
- Packages (installed by the CLI): @tabler/icons-react, motion
- Import: `import { BenchmarkRace } from "@/components/uibrik/benchmark-race/benchmark-race"`

Where to use the Benchmark Race React component:

- **Performance comparisons**: Bars racing to their results with counting numbers make benchmarks exciting. Pairs with [Comparison Table](https://uibrik.com/components/comparison-table).
- **Speed against competitors**: Tabs switching the measure show wins across several metrics.
- **Benchmark pages**: Rows re-sorting so the best leads make the winner obvious. Pairs with [Performance Meter](https://uibrik.com/components/performance-meter).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| highlight | `string` | `"Acme"` | Name of your own result, drawn in the accent colour. |
| color | `string` | `"#2563eb"` | Accent for your logo, bar and lead chip. Every other row stays neutral. |
| duration | `number` | `0.9` | How long a bar takes to reach its result the first time. |
| sort | `boolean` | `true` | Order rows by result; they trade places when the measure changes. |
| shine | `boolean` | `true` | A shine passes along your bar each time it lands. |
| showLead | `boolean` | `true` | Show how far ahead you are of the best of the others, e.g. "3.1× faster". |
| benchmarks | `{ label: string; unit?: string; lowerIsBetter?: boolean; better?: string; caption?: string; results: { name: string; value: number; logo?: ReactNode; color?: string }[] }[]` | `3 measures` | One tab per measure. better is the word after the lead multiplier (faster, smaller, more). logo is a mark drawn in currentColor on a small tile; color is the brand colour its tile and bar take on hover. One measure hides the tabs. |
| index / defaultIndex | `number` | `0` | Selected measure, controlled or uncontrolled. |
| onIndexChange | `(index: number) => void` |  | Called when a tab is picked. |
| locale | `string` | `"en-US"` | Locale for number formatting. |
| className | `string` |  | Classes for the card. |