Model pickerPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/model-picker

• Markdown: https://ui.xzero.co.uk/components/blocks/model-picker/markdown

• Access: Xzero Pro

• Registry id: model-picker

• Source file: registry/blocks/model-picker/model-picker.tsx

• Keywords: model picker, model selector, llm model switcher, ai model dropdown, reasoning effort, claude, gpt, gemini, choose model, ai settings

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.

When to use

• 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.

When not to use

• 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

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/model-picker

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { ModelPicker } from "@/components/xzero/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}
    />
  );
}

API reference

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.

Prop	Type	Default	Description
models	PickerModel[]	sampleModels	The 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.
providers	PickerProvider[]	sampleProviders	Providers in the order More models groups them, each { id, name, mark, color? }. A model without its own mark uses its provider's.
featured	string[]	["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.
value	string	–	The chosen model id (controlled).
defaultValue	string	–	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.
defaultEffort	Effort	–	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.
open	boolean	–	Whether the menu is open (controlled).
defaultOpen	boolean	false	Opens the menu on first render.
onOpenChange	(open: boolean) => void	–	Called when the menu opens or closes.
showSummary	boolean	true	Shows 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.
className	string	–	Class on the root element.

Keyboard interactions

Keys	Action
Enter, Space, Arrow down	On the pill, opens the menu and focuses the current model.
Arrow up / Arrow 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 right / Arrow 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.

Accessibility

• 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 Xzero's shared ring.

Motion

• 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.

Responsive behavior

• 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.

Performance

• 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

• 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.

Related

• AI composer: The prompt box at the bottom of an AI app: files upload in place, / opens commands, @ inserts mentions, a model and effort menu sits in the toolbar, and the send button turns into a stop control ringed by the reply's progress.
• Model arena: A blind side by side model comparison in one card: send one prompt to two models, watch both answers stream at the same pace, vote for the better one, then reveal which model wrote each.
• AI chat: A full-screen AI chat where answers stream in as markdown with folding reasoning, tool chips and cited sources. People can switch chats and models, edit or retry a message into versions, rate replies and stop a reply mid-stream.
• Context window: An AI context window as a grid of 200 cells: the system prompt, tools, files, summary and messages fill it in order, a threshold row marks where compaction starts, and sending a message, attaching a file or compacting shows exactly how much still fits.
• Dropdown menu: A focused list of actions anchored to a trigger.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt