Model Picker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Model Picker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ModelPicker from @/components/ui/model-picker.

import { useState } from "react"
import { Feather, Gem, Sparkles } from "lucide-react"
import { ModelPicker, type AiModel } from "@/components/ui/model-picker"

const MODELS: AiModel[] = [
  { id: "swift", name: "Northwind Swift", group: "Northwind AI", description: "Short answers, almost instant", icon: <Feather />, capabilities: ["tools", "files"], contextWindow: 128_000, speed: 3, cost: 1 },
  { id: "standard", name: "Northwind Standard", group: "Northwind AI", description: "Balanced, for everyday work", icon: <Sparkles />, capabilities: ["vision", "tools", "files", "web"], contextWindow: 200_000, speed: 2, cost: 2, recommended: true },
  { id: "pro", name: "Northwind Pro", group: "Northwind AI", description: "Deep reasoning for analysis and reports", icon: <Gem />, capabilities: ["reasoning", "tools", "web", "files", "code", "vision"], contextWindow: 200_000, speed: 1, cost: 3, isNew: true },
]

export function ChatModel() {
  const [model, setModel] = useState("standard")
  return (
    <ModelPicker
      models={MODELS}
      value={model}
      onValueChange={(id) => setModel(id)}
      shortcut="mod+."
      labels={{ placeholder: "Pick a model", sheetTitle: "Switch model" }}
    />
  )
}

Props

• models*
  AiModel[]

  The models: { id, name, provider?, description?, icon?, group?, capabilities?, contextWindow?, speed?: 1 | 2 | 3, cost?: 1 | 2 | 3, pricing?, badge?: { label, tone? }, recommended?, isNew?, disabled?, disabledReason?, keywords? } from lib/ai-chat. A repeated id keeps its first model (with a warning while developing).

• value
  string

  The chosen model's id, controlled. "" shows the placeholder, and so does an id that is not among the models; the picker never replaces it on its own.

• defaultValuedefault ""
  string

  The starting model while uncontrolled. "" is automatic: the first recommended model, else the first enabled one (it follows models that arrive later).

• onValueChange
  (id: string, model: AiModel) => void

  Called with the id and the whole model after a pick or a typeahead jump. Never called for the automatic default.

• defaultOpendefault false
  boolean

  Starts with the list (or the sheet) open. Pass open and onOpenChange to control it.

• open
  boolean

  Whether the list is open, controlled. It never opens while disabled.

• onOpenChange
  (open: boolean) => void

  Called when the list opens or closes.

• disableddefault false
  boolean

  Dims the trigger; it never opens and the shortcut does nothing. A disabled Field around it does the same.

• loadingdefault false
  boolean

  Models are on their way: a spinner replaces the chevron and the list shows a loading row until models arrive.

• variantdefault "ghost"
  "ghost" | "soft" | "outline"

  ghost for composers and toolbars (a tint on hover and while open); soft and outline copy the field box, so the picker lines up with inputs and selects in a form.

• sizedefault "sm"
  "sm" | "md" | "lg"

  Trigger height 32 / 40 / 48px with matching text and icons. md grows to 44px on touch, sm keeps its look with a 44px hit area.

• radiusdefault "full"
  "none" | "sm" | "md" | "lg" | "full"

  The trigger's corners, scaled per size like the button; full is a pill.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Paints the trigger's text, tint and border in a tone. neutral keeps the field look; brand is for the one place a premium model should stand out.

• colordefault ""
  string

  Any CSS color for the trigger; replaces the tone. Leave empty to use the tone.

• showIcondefault true
  boolean

  The chosen model's icon before its name in the trigger (when the model has one).

• showProviderdefault false
  boolean

  The provider before the name in the trigger: "Northwind AI · Standard" (a name that repeats the maker is shortened).

• showCapabilitiesdefault false
  boolean

  The row of capability icons in each option (vision, tools, reasoning, web, files, code, image, voice), each with a tooltip.

• showSpeeddefault false
  boolean

  The 3-step speed meter in each option.

• showCostdefault false
  boolean

  The 3-step cost meter in each option.

• showContextdefault false
  boolean

  The context window in each option ("200K context"), formatted for the locale.

• showDescriptiondefault true
  boolean

  One line of description in the menu, two in the phone sheet. A locked model shows its reason either way.

• fullWidthdefault false
  boolean

  Stretches the trigger to its container with the chevron at the end, the usual choice as a form field.

• contentWidthdefault 320
  number

  The list's width on desktop in px (never narrower than the trigger, never wider than the screen).

• maxHeightdefault 560
  number

  The list's maximum height on desktop in px, capped by the room on screen; longer lists scroll with sticky group labels.

• sidedefault "top"
  "top" | "right" | "bottom" | "left"

  Where the list opens. Composers sit low on the screen, so it opens upward; it flips when there is no room.

• aligndefault "start"
  "start" | "center" | "end"

  How the list lines up with the trigger.

• container
  HTMLElement | null

  Where the list or the sheet is portaled (document.body by default).

• groupBydefault "group"
  "group" | "provider" | "none"

  List sections: by model.group, by model.provider, or one flat list. Models without one go last, under a separator with no visible label.

• searchdefault "auto"
  "auto" | "always" | "never"

  The search row on top of the list: auto shows it above 8 models. It matches names, providers, groups, capability names and keywords, diacritics ignored.

• responsivedefault true
  boolean

  A bottom sheet with 64px rows and two-line descriptions below 768px instead of the popover.

• shortcutdefault ""
  string

  A key combo in mod+k notation that toggles the list from anywhere ("mod+." is Cmd+. on a Mac, Ctrl+. elsewhere). Shown in the trigger's tooltip and set as aria-keyshortcuts. Empty binds nothing.

• namedefault ""
  string

  Renders a hidden native select with this name, so FormData and form reset work.

• localedefault ""
  string

  The locale of the context window numbers ("200K" in en-US, "200 K" and "1 mil." in ro-RO). Empty uses the UIProvider's, then the browser's.

• labels
  Partial<ModelPickerLabels>

  Every string, English by default (DEFAULT_MODEL_PICKER_LABELS): placeholder "Choose a model", trigger "Model" (the accessible name is "Model: Northwind Standard"), tooltip "Switch model", search "Search models", empty "No models found", loading, sheetTitle "Model", recommended, new, context (formatted) => "200K context", speed ["Slower", "Fast", "Fastest"], cost ["Low cost", "Medium cost", "High cost"], unavailable, ungrouped, results (count) => string, clearSearch, capabilities (DEFAULT_AI_CAPABILITY_LABELS).

• classNames
  Partial<Record<"trigger" | "icon" | "provider" | "name" | "chevron" | "content" | "search" | "group" | "option" | "badges" | "description" | "meta" | "capabilities", string>>

  Extra classes for the inner parts: the trigger and its pieces, the list surface (content), its search row and group labels, and the parts of each option.

• className
  string

  Extra classes for the trigger button, merged last. Other props (aria-*, data-*, onClick, onBlur, id, form, ref) go there too.

Parts

FAQ

Used in

More React AI components