Three ways to compare — spring-grown benchmark bars with a ratio callout, a sticky-header feature matrix with a highlighted column, and a before/after toggle that morphs scattered tools into a connected hub.
Bar comparison
bar-comparison.tsxBenchmark bars grow on a spring when scrolled into view, re-sort per metric tab, and a ratio callout rolls to show how far ahead you are.
| Prop | Type | Default | Description |
|---|---|---|---|
benchmarks | Benchmark[] | — | { id, label, unit, lowerIsBetter?, decimals?, entries, method?, callout? }. One tab per benchmark. |
benchmarks[].entries | { name: string; value: number; highlight?: boolean }[] | — | highlight marks your product with the volt bar and the ratio callout. |
defaultBenchmark | string | — | Id of the tab shown first. |
eyebrow / heading / subheading | string | — | Header copy. |
className | string | — | Classes for the outer section. |
Feature matrix
feature-matrix.tsxScrollable feature table with a sticky header and first column, a volt-banded highlight column, group headings and a Differences only switch.
| Prop | Type | Default | Description |
|---|---|---|---|
products | MatrixProduct[] | — | { id, name, note?, highlight? } — one column each. |
groups | MatrixGroup[] | — | { title, rows: { label, hint?, values: Record<productId, boolean | string> }[] }. |
maxHeight | number | 460 | Height of the scroll area; the header stays pinned inside it. |
heading / subheading | string | — | Header copy. |
className | string | — | Classes for the outer section. |
Before and after
before-after.tsxA toggle morphs six scattered, tangled tools into a hub-and-spoke system with travelling pulses, while the side stats crossfade.
| Prop | Type | Default | Description |
|---|---|---|---|
tools | string[] | — | Six tool names read best; they orbit the hub in the after state. |
hub | string | "Tandem" | Name on the central hub. |
beforeLabel / afterLabel | string | — | Toggle labels. |
beforeStats / afterStats | { value: string; label: string }[] | — | Three stats for each state. |
defaultMode | "before" | "after" | "after" | Uncontrolled starting state. |
mode / onModeChange | "before" | "after" / (mode) => void | — | Controlled state. |
className | string | — | Classes for the outer section. |
Install the whole set
Installs every comparison variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Odometer Number, Switch, Tabs
Accessibility
- Benchmark values are real text beside each bar; the matrix is a semantic table with row, column and group headers and screen-reader labels for checks and dashes.
- The before/after diagram is a single labelled image describing both states; stats update in a polite live region.
- Bar growth, node morphing and pulses are skipped under reduced motion; tabs and switches are keyboard operable.