4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T4601,"use client"; import { SiAnthropic, SiGoogle, SiMeta, SiOpenai, SiX, } from "@icons-pack/react-simple-icons"; import { Brain, Check, ChevronDownIcon, Eye, FileText, Filter, Image as ImageIcon, InfoIcon, SlidersHorizontal, StarIcon, Wrench, Zap, } from "lucide-react"; import React from "react"; import { cn } from "@/registry/lib/utils"; import { Button } from "@/registry/ui/button"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/registry/ui/dropdown-menu"; import { Input } from "@/registry/ui/input"; import { Label } from "@/registry/ui/label"; import { Popover, PopoverContent, PopoverTrigger } from "@/registry/ui/popover"; import { createPreviewCardHandle, PreviewCard, PreviewCardContent, PreviewCardTrigger, } from "@/registry/ui/preview-card"; import { RadioGroup, RadioRoot } from "@/registry/ui/radio"; import { ScrollArea } from "@/registry/ui/scroll-area"; import { Separator } from "@/registry/ui/separator"; import { TabIndicator, Tabs, TabsList, TabsPanel, TabsTab, } from "@/registry/ui/tabs"; import { createTooltipHandle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/ui/tooltip"; const ModelDetailPopoverHandle = createPreviewCardHandle(); const ModelTooltipHandle = createTooltipHandle>(); type ModelDetail = { value: string; name: string; provider: string; isStarred: boolean; description: string; }; export const T3ModelSelector = () => { const [selectedModel, setSelectedModel] = React.useState( null, ); const [open, setOpen] = React.useState(false); const [searchQuery, setSearchQuery] = React.useState(""); return ( <> {selectedModel?.name || "Select a model"} } />

Search models setSearchQuery(e.target.value)} placeholder="Search models..." value={searchQuery} variant="ghost" />

{PROVIDERS.map((provider) => ( ( )} value={provider.value} > {provider.icon} ))} {PROVIDERS.map((provider) => { const filteredModels = MODELS.filter((m) => { const matchesProvider = provider.value === "starred" ? m.isStarred : m.provider === provider.value; const matchesSearch = m.name .toLowerCase() .includes(searchQuery.toLowerCase()); return matchesProvider && matchesSearch; }); return ( {filteredModels.length > 0 ? ( { const model = MODELS.find((m) => m.value === val) ?? null; setSelectedModel(model); }} value={selectedModel?.value ?? ""} > {filteredModels.map((model) => { const labelId = `label-${model.value}`; const descId = `desc-${model.value}`; const isSelected = selectedModel?.value === model.value; return (

setOpen(false)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); setOpen(false); } }} value={model.value} >

{model.name}

{model.description}

{ e.stopPropagation(); }} size="icon-xs" variant="ghost" > Info for {model.name} } />

); })} ) : (

No models found.

)} ); })}

{({ payload: model }) => (

{model?.name}

)} {({ payload: model }) => { return (

{model?.name}

{model?.description}

); }} ); }; const FilterMenu = () => { const [filters, setFilters] = React.useState(FILTERS); const activeCount = filters.filter((f) => f.checked).length; const toggleFilter = (id: string) => { setFilters((prev) => prev.map((item) => item.id === id ? { ...item, checked: !item.checked } : item, ), ); }; return ( 0 ? `Filter (${activeCount} active)` : "Filter models" } className="bg-secondary/50 hover:bg-secondary/80 text-secondary-foreground relative mr-4" size="icon-sm" variant="secondary" > {activeCount > 0 && ( {activeCount} )} } />

{filters.map((item) => ( toggleFilter(item.id)} >

{item.icon}

{item.label}

{item.checked && } ))}

Show combined results setFilters(filters.map((f) => ({ ...f, checked: false }))) } unstyled > Clear filters ); }; const FILTERS = [ { checked: false, icon: , id: "fast", label: "Fast", }, { checked: false, icon: , id: "vision", label: "Vision", }, { checked: false, icon: , id: "reasoning", label: "Reasoning", }, { checked: true, icon: , id: "effort", label: "Effort Control", }, { checked: true, icon: , id: "tool", label: "Tool Calling", }, { checked: true, icon: , id: "image", label: "Image Generation", }, { checked: false, icon: , id: "pdf", label: "PDF Comprehension", }, ]; const PROVIDERS = [ { icon: , name: "Favorites", value: "starred" }, { icon: , name: "OpenAI", value: "openai" }, { icon: , name: "Anthropic", value: "anthropic" }, { icon: , name: "Google", value: "google" }, { icon: , name: "Meta", value: "meta" }, { icon: , name: "XAi", value: "xai" }, ]; const MODELS = [ { description: "Our high-intelligence flagship model for complex, multi-step tasks.", isStarred: true, name: "GPT-4o", provider: "openai", value: "gpt-4o", }, { description: "Fast, inexpensive model for simple tasks.", isStarred: false, name: "GPT-3.5 Turbo", provider: "openai", value: "gpt-3.5-turbo", }, { description: "Most powerful model for highly complex tasks.", isStarred: true, name: "Claude 3 Opus", provider: "anthropic", value: "claude-3-opus", }, { description: "Balance of intelligence and speed.", isStarred: true, name: "Claude 3.5 Sonnet", provider: "anthropic", value: "claude-3.5-sonnet", }, { description: "Mid-size multimodal model that scales across a wide range of tasks.", isStarred: false, name: "Gemini 1.5 Pro", provider: "google", value: "gemini-1.5-pro", }, { description: "The most capable openly available LLM.", isStarred: false, name: "Llama 3 70B", provider: "meta", value: "llama-3-70b", }, { description: "A rebellious AI with a bit of wit.", isStarred: false, name: "Grok 1.5", provider: "xai", value: "grok-1.5", }, ]; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","@base-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","@icons-pack/react-simple-icons",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40icons-pack%2Freact-simple-icons","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@icons-pack/react-simple-icons"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils","@lumi-ui/button","@lumi-ui/dropdown-menu","@lumi-ui/input","@lumi-ui/label","@lumi-ui/popover","@lumi-ui/preview-card","@lumi-ui/radio","@lumi-ui/scroll-area","@lumi-ui/separator","@lumi-ui/tabs","@lumi-ui/tooltip"]}]]}],["$","$L50",null,{"sourceUrl":"https://www.lumiui.dev/r/t3-model-selector.json","proxyUrl":"https://shadcnregistry.com/r/lumiui/t3-model-selector","itemId":"@lumiui/t3-model-selector"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/components/t3-model-selector.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

T3 Chat Model Selector

Installation

Files

components

Styles