Search

Search the site

All components

Model Switcher

Compact select for choosing among LLM or pricing profiles; optional labels per model key.

Default
Default model switcher
Model
1"use client";
2
3import { ModelSwitcher } from "@/registry/ui";
4import { useState } from "react";
5
6const models = {
7 "gpt-4o": { input: 0.00015, output: 0.0006 },
8 "gpt-4o-mini": { input: 0.00015, output: 0.0006 },
9}
10
11export function ModelSwitcherDefaultExample() {
12 const [model, setModel] = useState("gpt-4o");
13 return <ModelSwitcher value={model} onChange={setModel} models={models} />;
14}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash
npx shadcn@latest add @tt-ui/model-switcher

Props

NameTypeDefaultDescription
valuestringRequiredThe value of the model switcher
onChangefunctionRequiredThe function to change the model
modelsobjectRequiredThe models to choose from