Model Selector

The hover menu for Claude's model and thinking effort.

"use client";

import { useState } from "react";

import { ClaudeModelSelector } from "../components/claude-model-selector";
import type { ClaudeEffortId, ClaudeModelId } from "../types/claude";

export default function ClaudeModelSelectorExample() {
  const [model, setModel] = useState<ClaudeModelId>("opus-5.5");
  const [effort, setEffort] = useState<ClaudeEffortId>("high");

  return (
    <div className="bg-claude-bg flex justify-center p-6 pt-44 pb-36">
      <ClaudeModelSelector
        effort={effort}
        model={model}
        onEffortChange={setEffort}
        onModelChange={setModel}
      />
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/claude-model-selector

ClaudeModelSelector is a shadcn DropdownMenu that opens on hover, like claude.ai. The trigger shows the model and, in muted text, the effort, and fills when open. The menu lists the four current models (Fable 5.1, Opus 5.5, Sonnet 5.5, Haiku 4.5) as a DropdownMenuRadioGroup: a title over a muted description, with a blue check at the end of the selected one. Below a separator are an Effort submenu (radio items, current value shown muted) and a More models submenu with the older models.

The model and effort lists live in constants/claude-models.ts. Edit them to change labels, descriptions or which models are shown in the main list (group: "latest").

Used in