ns-ui
Model picker rendered as a legible cost/latency/quality Pareto scatter: the frontier is a rising line of solid nodes (quality can't rise without moving right into cost), dominated models are hollow nodes below it joined by a connector whose length is the quality you'd forfeit, and a readout names the selection with its three numbers plus the concrete delta once per commit.
Use when the options carry real measurable tradeoffs on more than one axis (cost, latency, quality) and the picker should show which candidates are actually dominated rather than hiding that behind marketing names in a dropdown; pick select-caustic or radio-group-pin instead when the options have no numeric axes to plot and the user is choosing a label, not a position on a frontier.
Install
npx shadcn add https://design.helpmarq.comns-ui / picker-pareto-frontier
The rising line is the frontier: you can't buy more quality without paying in cost and latency. Dominated models sit below it — strictly worse, still selectable.
Drag along the ridge, or arrow through the points — Home and End jump to the ends.
| Prop | Type | Default | Description |
|---|---|---|---|
| models | RidgeWalkModel[] | — | The models to plot. Needs at least one entry to render controls. |
| value? | string | — | Controlled selected model id. |
| defaultValue? | string | — | Initial selected id when uncontrolled. Defaults to the frontier model closest to the midline. |
| onValueChange? | (id: string) => void | — | Fires on commit — click, drag zone-crossing, or an arrow/Home/End key move. |
| mode? | RidgeWalkAxisMode | — | Controlled axis-emphasis mode. |
| defaultMode? | RidgeWalkAxisMode | — | Initial mode when uncontrolled. @default "balance" |
| onModeChange? | (mode: RidgeWalkAxisMode) => void | — | — |
| label? | string | — | Accessible name for the model radiogroup. @default "Model" |
| scoreLabel? | string | — | Word used for the score axis in captions and announcements, e.g. "MMLU". @default "quality" |
| className? | string | — | — |