---
title: Model Selector
description: The model chip and menu from Gemini's composer.
---

<Component path="gemini/examples/gemini-model-selector" />

<RegistryInstall name="gemini-model-selector" />

`GeminiModelSelector` is a shadcn `DropdownMenu`. The trigger is a ghost `Button` that shows the model's short name, and the menu opens above it. Each row is a `DropdownMenuRadioItem` in one `DropdownMenuRadioGroup`, with the check on the left for the current model, a name, an optional badge and a description. Models in the `thinking` group sit below a separator.

| Prop | Default | Description |
| --- | --- | --- |
| `model`, `defaultModel`, `onModelChange` | `pro` | Model state, controlled or uncontrolled. |
| `models` | `GEMINI_MODELS` | The options to show. |

```ts
interface GeminiModelOption {
  id: GeminiModelId;
  label: string;
  chip: string;
  description: string;
  group: "core" | "thinking";
  badge?: string;
}
```

## Used in

**[Gemini](/blocks/gemini)**

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.