Model Switcher
Compact select for choosing among LLM or pricing profiles; optional labels per model key.
Default
Default model switcher
Model
default-example.tsx
1"use client";23import { ModelSwitcher } from "@/registry/ui";4import { useState } from "react";56const models = {7 "gpt-4o": { input: 0.00015, output: 0.0006 },8 "gpt-4o-mini": { input: 0.00015, output: 0.0006 },9}1011export 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
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | Required | The value of the model switcher |
| onChange | function | Required | The function to change the model |
| models | object | Required | The models to choose from |