Model Select

A model picker that prints context, speed and price as LED readouts in columns you can compare.

New in 1.6.Built on Icons and Popover.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/model-select.json

import { ModelSelect } from "@/components/ui/model-select"

<ModelSelect models={models} value={model} onValueChange={setModel} />

variant="outline" with only the columns that matter here. The list is at least as wide as the field.

Leave out price when there's no meter running. A readout a model doesn't have prints a dash.

The ref and other button attributes go on the trigger. The list opens in a Popover.

Prop	Type	Default
`models`	`ModelOption[]` { value, name, description?, context, speed?, price?: { input, output }, disabled?, note? }. Price is US dollars per million tokens; speed is tokens per second.	None
`value`	`string` Controlled value.	None
`defaultValue`	`string` Initial value when uncontrolled.	first enabled
`onValueChange`	`(value: string) => void` Called when a model is chosen.	None
`label`	`string` Names the trigger ("Model: Argon 2") and the list.	`"Model"`
`variant`	`"ghost" \| "outline"` ghost for a toolbar, outline for a form.	`"ghost"`
`readouts`	`("context" \| "speed" \| "price")[]` Columns to show. A column no model has is dropped.	all three
`side`	`"top" \| "bottom"` Where the list opens. It flips when there isn't room.	`"bottom"`
`open`	`boolean` Controlled open state.	None
`defaultOpen`	`boolean` Initial open state.	`false`
`onOpenChange`	`(open: boolean) => void` Called when the list opens or closes.	None
`color`	`NeonColor` Palette name or hex.	inherited

The list is a listbox that takes focus on open and tracks the highlighted option with aria-activedescendant.
Arrow keys move, Home and End jump, typing a name's first letters finds it, Enter or Space chooses and closes, Escape closes, and focus returns to the trigger.
Each option is described by its readouts in words, "200k token context, 78 tokens per second, $3 in, $15 out per million tokens", since the LED cells are hidden from screen readers.
Disabled models are skipped by the keyboard and can't be chosen; put the reason in note.