Model Selector

The model chip and menu from Gemini's composer.

"use client";

import { useState } from "react";

import { Card } from "@/components/ui/card";

import { GeminiModelSelector } from "../components/gemini-model-selector";
import { getGeminiModel } from "../lib/gemini-model";
import type { GeminiModelId } from "../types/gemini";

export default function GeminiModelSelectorExample() {
  const [model, setModel] = useState<GeminiModelId>("flash");

  return (
    <Card className="border-gemini-border bg-gemini-bg font-gemini text-gemini-muted flex w-full min-w-0 flex-col items-center gap-3 overflow-hidden rounded-2xl border px-4 pt-64 pb-8 text-sm ring-0">
      <GeminiModelSelector model={model} onModelChange={setModel} />
      <p aria-live="polite">Selected: {getGeminiModel(model).label}</p>
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/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.

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

Used in

Gemini

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