Components
Standalone model picker pill button with built-in popover. Renders model name + version split (e.g. Sonnet 4.6). Supports controlled and uncontrolled modes. Self-contained port from 21st.dev Agent Elements.
npx shadcn@latest add https://21st.dev/r/21stdev/model-pickerLoading preview...
import { ModelPicker, type ModelOption } from "@/components/ui/model-picker";
const models: ModelOption[] = [
{ id: "sonnet-4-6", name: "Sonnet", version: "4.6" },
{ id: "opus-4-7", name: "Opus", version: "4.7" },
{ id: "haiku-4-5", name: "Haiku", version: "4.5" },
];
export default function Demo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
<div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950 p-12 w-full max-w-md flex items-center justify-center">
<ModelPicker models={models} defaultValue="sonnet-4-6" />
</div>
</div>
);
}
Loading preview...