Search

Search components and blocks

Sign in

Model Selector

Open page

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—

Model Selector Dialog

ProOpen page

The command-menu take on the model picker: a button with a ⌘J hint opens a centered modal (press ⌘J or Ctrl+J from anywhere). Search and arrow through the models on the left while a detail pane on the right follows the highlighted row — big logo, provider, description and its own reasoning-effort levels, which you can set without leaving the keyboard-driven list. Enter picks the highlighted model and closes.

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

Choose a model

Search models and set how hard they think.

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