beUI Pro for mobile presale is open — Lifetime $129 for the until launch
Model Picker
2 variants
A searchable model picker with provider logos, grouped options, keyboard selection, and a fixed bottom search field.
Provider catalog
model-picker.tsxBrowse a sample catalog of 21 models across four providers, or search by model and provider.
TSXcomponents/previews/premium/model-picker-preview.tsx
"use client";
import { ModelPicker } from "@/components/premium/model-picker";
import { SAMPLE_MODELS } from "@/components/premium/model-picker/sample-models";
export function ModelPickerPreview() {
return (
<div className="flex w-full items-center justify-center p-6">
<ModelPicker models={SAMPLE_MODELS} defaultValue="claude-sonnet-5" />
</div>
);
}
export function ModelPickerRailPreview() {
return (
<div className="flex w-full items-center justify-center p-6">
<ModelPicker
models={SAMPLE_MODELS}
defaultValue="gpt-5.4"
variant="provider-rail"
/>
</div>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardProvider rail
model-picker.tsxSwitch providers from an icon rail, search models, and select with compact radio rows.
TSXcomponents/previews/premium/model-picker-preview.tsx
"use client";
import { ModelPicker } from "@/components/premium/model-picker";
import { SAMPLE_MODELS } from "@/components/premium/model-picker/sample-models";
export function ModelPickerPreview() {
return (
<div className="flex w-full items-center justify-center p-6">
<ModelPicker models={SAMPLE_MODELS} defaultValue="claude-sonnet-5" />
</div>
);
}
export function ModelPickerRailPreview() {
return (
<div className="flex w-full items-center justify-center p-6">
<ModelPicker
models={SAMPLE_MODELS}
defaultValue="gpt-5.4"
variant="provider-rail"
/>
</div>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Add this component with the shadcn CLI.
$ bunx --bun shadcn add @beui-pro/model-picker