# Model Picker

> A header menu for choosing the model a chat runs on — each option with a one-line description and a Pro badge — plus an upgrade entry.

A shadcn/ui block from the [@sortui](https://sortui.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/sortui/model-picker-01).

- Page, with a live preview: https://shadcn.exchange/r/sortui/model-picker-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/sortui/model-picker-01-light-4ddb7a51da71bb88.png
- Registry item: https://sortui.dev/r/model-picker-01.json
- Categories: ai
- Listed: 2026-10-23, source last changed 2026-10-23

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/sortui/model-picker-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@sortui/badge`, `@sortui/button`, `@sortui/dropdown-menu`

## Files

### `registry/blocks/model-picker-01/components/model-picker.tsx`

```tsx
"use client"

import { ChevronDownIcon, SparklesIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export type Model = {
  id: string
  name: string
  description: string
  pro?: boolean
}

export const models: Model[] = [
  {
    id: "fast",
    name: "Lumen Fast",
    description: "Answers right away",
  },
  {
    id: "thinking",
    name: "Lumen Thinking",
    description: "Thinks longer for better answers",
  },
  {
    id: "pro",
    name: "Lumen Pro",
    description: "Research-grade reasoning",
    pro: true,
  },
]

export function ModelPicker({
  value,
  onValueChange,
  options = models,
  onUpgrade,
}: {
  value: string
  onValueChange: (value: string) => void
  options?: Model[]
  onUpgrade?: () => void
}) {
  const current = options.find((model) => model.id === value) ?? options[0]
  if (!current) return null

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={<Button variant="ghost" className="text-base font-medium" />}
      >
        {current.name}
        <ChevronDownIcon
          data-icon="inline-end"
          className="text-muted-foreground"
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-72">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Model</DropdownMenuLabel>
          <DropdownMenuRadioGroup
            value={current.id}
            onValueChange={onValueChange}
          >
            {options.map((model) => (
              <DropdownMenuRadioItem key={model.id} value={model.id}>
                <div className="flex min-w-0 flex-col">
                  <span className="flex items-center gap-2">
                    {model.name}
                    {model.pro && <Badge variant="secondary">Pro</Badge>}
                  </span>
                  <span className="text-muted-foreground">
                    {model.description}
                  </span>
                </div>
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
        {onUpgrade && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={onUpgrade}>
              <SparklesIcon />
              Upgrade for longer answers
            </DropdownMenuItem>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```