Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA searchable model selector grouped by provider, with capability icons, locked models and a detail pane showing context window, cost and capabilities.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { ModelPicker, type ModelOption } from "@/components/ui/model-picker"const models: ModelOption[] = [
{ id: "lyra-mid", name: "Lyra Mid", provider: "Lyra", capabilities: ["vision", "tools"], contextWindow: 200000, cost: 2 },
{ id: "orion-think", name: "Orion Think", provider: "Orion", locked: true, lockedLabel: "Pro" },
]
<ModelPicker models={models} defaultValue="lyra-mid" />| Prop | Type | Default | Description |
|---|---|---|---|
models | ModelOption[] | - | The models to offer. Models with the same provider are grouped. |
value | string | - | Selected model id (controlled). |
defaultValue | string | - | Initial model id when uncontrolled. |
onValueChange | (id: string) => void | - | Called with the chosen id. |
placeholder | string | "Select a model" | Trigger text when nothing is selected. |
searchPlaceholder | string | "Search models…" | Placeholder of the search box. |
searchable | boolean | more than 6 models | Show the search box. |
showDetails | boolean | true | Show the detail pane on wider screens. |
onLockedSelect | (model: ModelOption) => void | - | Called when a locked model is chosen, for example to open an upgrade dialog. |
align | "start" | "center" | "end" | "start" | Which side of the trigger the list aligns to. |
variant | "default" | "compact" | "default" | compact hides the provider mark and fits a composer toolbar. |
Also accepts <button> props for the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Stable id passed to onValueChange. |
name | string | - | Name in the list and on the trigger. |
provider | string | - | Provider or family, used for grouping. |
description | string | - | One sentence on what the model is good at. |
capabilities | ("vision" | "reasoning" | "tools" | "fast")[] | - | Shown in words in the detail pane. |
contextWindow | number | - | Context window in tokens. |
cost | 1 | 2 | 3 | - | Relative cost, 1 is cheapest. |
isNew | boolean | - | Adds a New badge. |
locked | boolean | - | The model cannot be picked. |
lockedLabel | string | - | Badge text when locked, such as "Pro". |
combobox. Arrow Down opens the list; arrow keys move, Enter selects and Escape closes.searchable is off, so keyboard navigation and type-ahead keep working.