1 variant

Model Picker

Name: easeUI Pro
Price: 99.00 USD

A model switcher with each maker's real logo, what the model is good at and its context window, with search and full keyboard control.

usage.tsx

import { ModelPicker } from "@/components/registry/model-picker";

export function ChatHeader() {
  return (
    <ModelPicker
      defaultValue="claude-sonnet"
      models={[
        { id: "claude-sonnet", name: "Claude Sonnet 5", provider: "anthropic", context: "200K" },
        { id: "gpt-5", name: "GPT-5", provider: "openai", context: "400K" },
        { id: "gemini-pro", name: "Gemini 2.5 Pro", provider: "google", context: "1M" },
      ]}
      onValueChange={(id) => setModel(id)}
    />
  );
}

"use client";

import { Check, ChevronDown, Search } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from "react";
import { SPRING_PANEL } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type ModelProvider = "anthropic" | "openai" | "google" | "mistral" | "deepseek" | "xai" | "meta";

export interface ModelOption {
  id: string;

275 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/model-picker