Model picker

Model menu for the composer footer, grouped by provider, with search, capability glyphs, a New tag and your own provider marks.

Markdown

On this page

Grouped by provider with search, capability glyphs and a New tag.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/model-picker.json

Usage

tsx

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

<ModelPicker
  models={[
    {
      id: "claude-sonnet-4-5",
      name: "Claude Sonnet 4.5",
      provider: "anthropic",
      description: "Fast and strong at code",
      capabilities: ["vision", "tools", "reasoning"],
    },
  ]}
  providers={[{ id: "anthropic", name: "Anthropic" }]}
  value={model}
  onValueChange={setModel}
  renderProviderMark={(id) => <ProviderLogo id={id} />}
/>

chatcn bundles no provider logos. Supply your own marks through renderProviderMark, within each provider's brand guidelines.

Examples

States

Default and small triggers, loading and disabled.

Props

Prop	Type	Notes
`models`	`ModelOption[]`	`id`, `name`, `provider`, `description`, `capabilities`, `isNew`, `disabled`, `disabledReason`
`providers`	`{ id, name }[]`	Group names and order
`value`, `defaultValue`, `onValueChange`	`string`
`renderProviderMark`	`(providerId) => ReactNode`	16 px node for trigger and group labels
`loading`, `disabled`	`boolean`
`size`	`"sm" \| "md"`	28 or 32 px trigger
`side`, `align`		Flips when there is no room
`showLegend`	`boolean`	Capability legend under the list. Default true

Keyboard

Key	Action
Typing	Filters by name, provider, description or capability (vision, tools, reasoning)
`ArrowUp`, `ArrowDown`	Move between available models, looping
`Enter`	Choose and close
`Esc`	Close and return focus to the trigger

Accessibility

The search field is a combobox with aria-activedescendant; options are option elements in labelled provider groups.
Capability glyphs carry text for screen readers and a legend for everyone else.
Unavailable models stay visible with a lock and the reason, and are skipped by the arrow keys.
On touch the list opens without focusing search, so the keyboard does not cover it.

Motion

The popover's 180 ms entrance from the trigger, skipped when opened from the keyboard.
Highlight follows the pointer and the arrows instantly.