Model Comparison
betaModels side by side — price, speed, context, scores — in a table that marks the best of each row and lets people choose one.
- AI
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add model-comparisonNo npm packages are needed beyond what Dowel already requires.
import { ModelComparison } from "@/components/ui/model-comparison";Default
Selectable
<ModelComparison>
| Prop | Type | Default |
|---|---|---|
label (required)The table's caption. | string | — |
metrics (required) | readonly ModelComparisonMetric[] | — |
models (required) | readonly ModelComparisonModel[] | — |
hideLabel | boolean | false |
highlightBestMark the best value in each row. Default true. | boolean | true |
labelsWords, for other languages. | Partial<ModelComparisonLabels> | — |
localeLocale for number formatting. | string | — |
onSelectGive each model a toggle to choose it. | (id: string) => void | — |
selectedThe chosen model. | string | — |
Plus every attribute of <div> except onSelect.
A real table with a caption, model column headers and metric row headers, so every cell is announced with its model and metric. The best value in a row is marked with the word "Best", not colour alone, and yes/no values are words as well as icons. Missing values are spoken as "Not available". The metric column stays in place while models scroll inside a named, focusable region. Choosing is a toggle button per model (aria-pressed).
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes