Model picker

A React component in Beamline's AI & agents category.

Choose the AI model for a request by what it can do and what it costs: a trigger with the model's name opens a searchable list grouped by provider, with capability filters, and every row shows its context window, speed and price tier; the model under the pointer or the arrow keys explains itself beside the list.

Use it for

Letting a person pick the model an agent, a chat or a single request runs on, when the models differ in what they can do (images, tools, reasoning), how much they read and what they cost.
The model menu of a composer (PromptBar renders it from its own models prop).

Not for

One choice from a short list with no facts to compare (select).
Choosing a text-to-speech voice (voice-picker).
Settings that apply to every model, such as temperature (slider, number-field).

Anatomy

trigger: the chosen model's mark and name and a chevron; secondary in a form, ghost inside a composer
layer: opens out of the trigger (a bottom sheet on a phone); a size container
search field (when the set has more than six models): magnifier, query, the count of matches
capability filters: one chip per capability the set offers, each with how many models have it; several can be on, and only models that have every chosen capability stay
list: provider headings in the given order, rows that glide a plate to the active one
row: mark, name with the match emphasised, a badge (New, Preview), a Recommended tag, capability glyphs, context (200K), speed as three bars, price tier as $ / $$ / $$$; a chosen row carries a check; a model that cannot be used says why
detail (beside the list when the layer is 34rem or wider): name, provider, description, capabilities in words, context window, output speed in tokens a second, price per million tokens in and out, knowledge cutoff, and why it is unavailable
empty result: says what matched nothing and offers to clear the filters

Variants

variant: secondary, ghost
size: sm, md

States

closed
open
searching (the list ranks matches flat; headings name the provider beside each row)
filtered by capability
no match
unavailable model (dimmed, not pickable, its reason on the row and in the detail)
unmeasured fact (speed or price null: hatched, said as Not measured)
disabled trigger

Keyboard

Enter, Space or ↓ on the trigger opens it with focus in the search (or on the list when there is no search) and the chosen model active
↑/↓ move the active row past unavailable ones; Home/End jump to the first and last
typing filters and ranks; Enter picks the active model and closes
Tab reaches the capability chips (← → between them, Space toggles)
Escape closes and focus returns to the trigger

Motion

The layer opens out of the trigger and closes back into it (the shared overlay surface). One plate glides between rows under the pointer and the arrow keys and appears in place when a search starts. Filtering slides the remaining rows to their places, new ones grow in and the ones filtered out leave as fading ghosts (useFlip). The detail cross-fades to the active model and its speed bars and context bar grow to their new lengths. The trigger's name slides to the new model (Button's label change). Reduced motion keeps the fades and places everything at once.

Props

Prop	Type	Default	Description
`models` (required)	`ModelOption[]`	—	id, label, provider (the heading), icon, description, badge, capabilities, context (tokens), speed (tokens/s), price ({ input, output } per 1M), cutoff, recommended, unavailable (the reason), keywords.
`value / defaultValue / onValueChange`	`string / (id: string) => void`	—
`open / defaultOpen / onOpenChange`	`boolean`	—
`variant`	`"secondary" \| "ghost"`	—	The trigger's weight. Default secondary.
`size`	`"sm" \| "md"`	—	Default md.
`label`	`string`	—	What is chosen, for assistive tech. Default "Model".
`capabilityInfo`	`Record<string, { label: string; icon?: ReactNode }>`	—	Names and glyphs for capabilities beyond the built-in ones (vision, tools, reasoning, web, files, audio, code, images).
`search`	`boolean`	—	Show the search field. Default: when there are more than six models.
`detail`	`boolean`	—	Show the detail beside the list when there is room. Default true.
`align / side`	`"start" \| "center" \| "end" / "top" \| "bottom"`	—	Where the layer opens against the trigger.
`disabled`	`boolean`	—
`classNames`	`ModelPickerClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—	On the trigger.

Built from

button
popover
chip-group
kbd

Dependencies

@radix-ui/react-popover, lucide-react

Import

import { ModelPicker } from "@/components/model-picker/model-picker";

Get it

Model picker is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent