AI Model Picker

A model dropdown picker with capability star ratings, speed / cost badges, and a recommended tag.

A model-switching dropdown for AI applications: every option lists a provider color swatch, an intelligence star rating, a speed lightning bolt, and a cost $ badge, and can be tagged "Recommended". The selected item gets a check mark, the panel opens and closes on a spring, and full keyboard operation is supported.

Loading preview…

npx shadcn@latest add https://webberui.com/r/ai-model-picker.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Selected by defaultdefaultValue

Hint textplaceholder

Max panel heightmaxHeight

280

<AiModelPicker />

Installation

npx shadcn@latest add https://webberui.com/r/ai-model-picker.json

Or, once registries are configured in components.json, install it as @webberui/ai-model-picker.

Usage

import { AiModelPicker, type AiModel } from "@/components/ui/ai-model-picker";

const models: AiModel[] = [
  {
    id: "aurora-pro",
    name: "Aurora Pro",
    provider: "Auralab",
    intelligence: 4,
    speed: 2,
    cost: 2,
    recommended: true,
    description: "The best balance of intelligence and speed",
  },
  {
    id: "swift-mini",
    name: "Swift Mini",
    provider: "Swiftware",
    intelligence: 3,
    speed: 3,
    cost: 1,
  },
];

<AiModelPicker
  models={models}
  defaultValue="aurora-pro"
  onChange={(model) => console.log(model.id)}
/>

Props

Prop	Type	Default	Description
`models`	`AiModel[]`	—	List of selectable models
`value`	`string`	—	Controlled mode: id of the currently selected model
`defaultValue`	`string`	—	Uncontrolled mode: id of the model selected by default
`onChange`	`(model: AiModel) => void`	—	Callback when the selection changes, passing the complete model object
`placeholder`	`string`	`"選擇模型"` ("Select a model")	Text shown on the trigger when no model has been selected yet
`maxHeight`	`number`	`280`	Maximum height of the dropdown panel (px); the panel scrolls internally beyond that
`className`	`string`	—	Forwarded to the outermost container, merged through cn()

AiModel

Field	Type	Default	Description
`id`	`string`	—	Unique identifier, used as the selection value
`name`	`string`	—	Display name of the model
`provider`	`string`	—	Provider name, shown beneath the name and used for the color swatch
`hue`	`number`	Derived from provider	Hue of the provider color swatch (0–360)
`intelligence`	`number`	—	Intelligence star rating (1–5, shown as stars)
`speed`	`number`	—	Speed level (1–3, shown as lightning bolts)
`cost`	`number`	—	Cost level (1–3, shown as $)
`description`	`string`	—	A one-line short description, shown in the option row
`recommended`	`boolean`	`false`	Whether the "Recommended" tag is shown

Accessibility

The trigger is marked aria-haspopup="listbox" with aria-expanded, and the panel is role="listbox"; focus moves into the panel on open, and focus returns to the trigger on close
Full keyboard support: ↑/↓ opens and moves the highlight, Home/End jumps to the first and last, Enter/Space selects, Esc closes, and Tab collapses and leaves
aria-activedescendant points at the currently highlighted option and the selected item is marked aria-selected, so assistive technology announces it correctly
The star ratings and badges are announced through role="img" with text labels such as "Intelligence 4/5", while the individual icons are hidden from assistive technology (aria-hidden)
When the user has "reduce motion" enabled at the system level, the panel degrades to a plain fade in / fade out, and the arrow and check mark drop their pop animations