Name: Lokalhost.io
Rating: 4.9 (120 reviews)

Preview

Installation

Run the following command

npx shadcn@latest add https://localhostui.com/r/model-picker.json

ModelPicker

Prop	Type	Default	Description
`models*`	`AIModel[]`	—	Full list of selectable models.
`selectedModelId*`	`string \| null`	—	Currently selected model id (controlled).
`onSelectModel*`	`(model: AIModel) => void`	—	Called when the user picks a model.
`searchPlaceholder`	`string`	—	Placeholder text for the search field.
`searchValue`	`string`	—	Controlled search value.
`onSearchChange`	`(value: string) => void`	—	Called on search value change (component manages its own state if omitted).
`sectionLabels`	`Partial<Record<ModelTier, string>>`	—	Labels for each section header.
`className`	`string`	—	Extra classes on the outer panel.
`maxListHeight`	`number \| string`	—	Max height of the scrollable list area.
`enableTiltEffect`	`boolean`	—	Enable the coverflow-style scale/tilt effect on the centered row while scrolling.

AIModel

Prop	Type	Default	Description
`id*`	`string`	—	Stable unique id, e.g. "claude-sonnet-4-6"
`name*`	`string`	—	Display name, e.g. "Claude Sonnet 4.5"
`tier*`	`ModelTier`	—	Section this model is grouped under.
`icon*`	`React.ReactNode`	—	Icon renderer, sized by the list row.
`iconClassName`	`string`	—	Icon color, any Tailwind text color class.
`disabled`	`boolean`	—	Disable a specific row (e.g. not available on current plan).
`description`	`string`	—	Optional short description, used as an aria-description.