Search

Search components and blocks

Sign in

Model Selector

A model picker built on the Command menu, where the trigger itself morphs into the panel: one surface grows from the pill to the full picker in width and height, with the pill staying on top and its chevron riding the right edge. Click outside or press Escape to fold it back. Search across providers, each model with its brand logo and a one-line description. Models that can think harder also get a reasoning-effort level (Low, Medium, High, Max): a sliding pill picks it, a four-bar gauge on the trigger shows it at a glance, and switching to a model that doesn't support your level falls back to its default. Models with no adjustable reasoning say so instead.

pnpm dlx shadcn@latest add @ditherui/model-selector
Reasoning effortClaude Opus 5.5

Install

$ pnpm dlx shadcn@latest add @ditherui/model-selector

Props

modelsModelOption[]sample models
defaultModelIdstringfirst model
modelIdstring—
openboolean—
defaultOpenbooleanfalse
onOpenChange(open: boolean) => void—
onChange(model: ModelOption, level: ModelLevel | null) => void—
classNamestring—

When to use the model selector

Use it to let people pick an AI model. The trigger morphs into the picker panel and a detail pane can follow the highlighted model.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components