Search

Search components and blocks

Sign in

Model Selector Dialog

Pro

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