Model picker
ProA model picker in one quiet pill: open it to choose from featured models with a one line note each, set the reasoning effort, or browse every other model by provider, and the pill swaps to your choice in place.
Live block · sample data
- Choosing the model and effort for a chat, an agent or a playground.
- A default model setting with a short review of what the chosen model costs and how much context it takes.
- Comparing two models' answers side by side; use model-arena.
- A full prompt box with attachments and tools; use ai-composer, which has its own model chip.
- Choosing from a plain list of options with no descriptions; use the select or dropdown-menu component.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Drop it into a composer or settings row. Pass models, value and onChange to control the selection, and effort with onEffortChange for reasoning models; with no props it shows a sample lineup of current models.
example.tsx
import { ModelPicker } from "@/components/arc/blocks/model-picker/model-picker"; export function ComposerModel({ model, setModel, effort, setEffort }) { return ( <ModelPicker value={model} onValueChange={id => setModel(id)} effort={effort} onEffortChange={setEffort} featured={["claude-opus-5-5", "claude-sonnet-5-5", "claude-haiku-5-5"]} showSummary={false} /> );}ModelPicker
A model picker for an AI product. One quiet pill names the current model and its effort and opens a short menu: the featured models with a one line description each, an Effort submenu for reasoning models and every other model under More models, grouped by provider. Choosing a model closes the menu, the pill morphs to the new model, and the review underneath updates its description, context window, prices and effort. On phones the submenus open as pages inside the menu with a Back row.
PropTypeDefaultDescription
modelsPickerModel[]sampleModelsThe catalog. Each model has id (the API id the picker reports), name, provider, blurb (the short menu line), description, context, maxOutput, price { input, output } in USD per 1M tokens, released, and optional tag, effort { levels, default }, mark and color. Anthropic prices in the sample are real; every other price and limit is a sample value.providersPickerProvider[]sampleProvidersProviders in the order More models groups them, each { id, name, mark, color? }. A model without its own mark uses its provider's.featuredstring[]["claude-opus-5-5", "claude-sonnet-5-5", "gpt-6.1-sol", "gemini-4-argon"]Model ids listed at the top of the menu, in order. Every other model sits under More models. With your own models and no featured list, the first four are featured.valuestring–The chosen model id (controlled).defaultValuestring–The first chosen model when uncontrolled. Defaults to the first featured model.onValueChange(id: string, model: PickerModel) => void–Called when someone picks a model.effort"low" | "medium" | "high" | "xhigh" | "max"–Effort for the chosen model (controlled). A level the model does not accept snaps to the nearest level it does.defaultEffortEffort–The first effort when uncontrolled. Defaults to the chosen model's own default.onEffortChange(effort: Effort) => void–Called when the effort changes, including when a new model snaps it to a level it accepts.openboolean–Whether the menu is open (controlled).defaultOpenbooleanfalseOpens the menu on first render.onOpenChange(open: boolean) => void–Called when the menu opens or closes.showSummarybooleantrueShows the review under the pill: description, context, input and output price, effort, and a short confirmation after each change. Turn it off to use the pill alone, for example inside a composer toolbar.classNamestring–Class on the root element.- Enter, Space, Arrow down
- On the pill, opens the menu and focuses the current model.
- Arrow uporArrow down
- Moves through the models and rows. The highlight follows.
- Type a letter
- Jumps to the next model whose name starts with it.
- Enter, Space
- Chooses the highlighted model or effort and closes the menu.
- Arrow rightorArrow left
- Opens and closes the Effort and More models submenus, or their pages on phones.
- Escape
- Closes the menu and returns focus to the pill.
- Built on the Radix dropdown menu: the featured models, the effort levels and the other models are radio groups, so a screen reader announces each as checked or not.
- The pill's name includes the current model and effort, for example "Model: Claude Opus 5.5, medium effort. Change model".
- Each change is announced through a polite status region, and the review under the pill is a labelled section.
- Brand marks are decorative next to the model name and hidden from assistive technology.
- Focus returns to the pill when the menu closes. A pointer choice does not draw the keyboard focus ring; keyboard use keeps Arc's shared ring.
- The menu opens from the pill edge with a short offset, a slight scale and a quick fade, and reverses from where it is if closed mid-open.
- One highlight glides between rows on the snappy spring for the pointer and jumps for the keyboard, so moving through the list never flickers.
- On a change, the pill's mark and name crossfade and the pill width springs to the new name, so it never snaps.
- The review's values crossfade in place with no character morphing; every slot keeps its height.
- On phones, moving between menu pages slides the content a few pixels and the menu height springs to the new page.
- Reduced motion swaps everything in place and keeps every state and announcement.
- The pill truncates long names inside narrow toolbars and keeps its chevron visible.
- Below 640px the Effort and More models submenus become pages inside the same menu with a Back row, so nothing opens off screen.
- Long lists scroll inside the menu, and the review's four values fold into a two by two grid under 400px.
- The menu mounts only while open. The highlight is one element per menu surface, moved with transforms.
- The pill width is measured with a ResizeObserver and animated once per change.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it wherever a person chooses which model answers: a composer toolbar, a settings row or an API playground. Keep the featured list short (three to five) and put the rest under More models.
- Pass blurb as a few words on what the model is for; it is the only line under the name in the menu. Put the longer sentence in description for the review.
- Only models with an effort field show the Effort row. Effort levels are per model, and a level the new model does not accept snaps to the nearest one it does.
- Show real prices only for models you have verified. The sample marks non-Anthropic prices as sample values.
The full library index for assistants is at /llms.txt.