Model Picker Block React component
A model picker for an AI chat composer: a searchable menu grouped by provider with Auto, favorites, capability filters, New, Beta and locked Pro models, a detail panel with intelligence and speed meters, context and price, and a thinking effort switch that appears for reasoning models.
About the Model Picker Block component
Model Picker Block is the model switch you find in AI chat apps, built into a message composer. Open it and models are grouped by provider, with an Auto option at the top, your favorites pinned above everything and filters to show only models that can see images, use tools, reason or search the web.
Hover or arrow through the list and a side panel explains the model: how smart and fast it is, its context window, price and what it can do. Pick a reasoning model and a Low, Medium, High thinking switch appears next to it in the composer.
When to use it
Use it in AI chat products, internal assistants, playgrounds for testing prompts, or anywhere users choose between models or modes.
Keep the list short and name models by what they are good at; lock premium models instead of hiding them so people know an upgrade exists.
Installation
Add the Model Picker Block component to your project with the shadcn CLI. It lands in components/model-picker.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/model-pickerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ModelPicker /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| models | AIModel[] | DEFAULT_MODELS |
| defaultValue Selected model id. "auto" picks a model per message. | string | "aurora-3-pro" |
| onChange | (id: string, effort: Effort) => void | — |
| defaultOpen Open the menu on first render. | boolean | true |
| auto Show the Auto option. | boolean | true |
| onUpgrade | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- modelsAIModel[]Default: DEFAULT_MODELS
- defaultValue
Selected model id. "auto" picks a model per message.
stringDefault: "aurora-3-pro" - onChange(id: string, effort: Effort) => void
- defaultOpen
Open the menu on first render.
booleanDefault: true - auto
Show the Auto option.
booleanDefault: true - onUpgrade() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Model Picker Block FAQ
- Are the default models real?
- No. Aurora, Cobalt, Ember and Sage are made-up names for the demo. Pass your own models array with the same fields.
- What does Auto do?
- It is a normal option with the id auto. Your backend decides which model answers each message when it receives that id. Turn it off with auto={false}.
- How do locked models behave?
- They stay visible with a Pro badge but cannot be picked. The side panel shows an Upgrade button that calls onUpgrade.
- When does the thinking switch show?
- Only when the selected model has the reasoning capability. onChange receives the model id and the current effort.
- Is it keyboard friendly?
- Yes. The search box is a combobox with aria-activedescendant, arrow keys move through the listbox, Enter picks, Escape closes and returns focus to the trigger, and the filters and effort switch are real toggle and radio buttons.
