Model picker
One dropdown for every model menu in the app. Each row carries a provider glyph, a label, an optional effort suffix, and a right-aligned price hint. Options can be grouped with a heading and a budget tag, and disabled with a hover reason.
Included in the single kansho full pack. Components are not offered as separate installs.
Default
Three Claude models with pricing hintsGrouped + disabled
A Specialist group with a budget tag and an unavailable modelComponent documentation
Model Picker
components/inputs/model-picker.tsxPurpose
Selects one model from provider-grouped options with effort, price, and budget context.
Appropriate use
Use when model choice needs more context than a plain label but remains a single selection.
Example
components/inputs/model-picker.tsx has a representative live example in the "Default" section on /components/model-picker.
States
Supports selected and unselected options, provider groups, effort and pricing-hint metadata, tags, disabled options with reasons, and default-open preview.
API and props
ModelPicker accepts options, value, onChange, placeholder, align, defaultOpen, and className; each option defines id, label, provider, optional effort, pricingHint, group, tag, disabled, and disabledReason.
Dependencies
React, Lucide icons, DropdownMenu, Tooltip, and the Kansho cn utility.
Accessibility
Disabled rows expose aria-disabled and an aria-describedby reason that remains available on focus; selection is visibly and textually identified.
Limitations
The provider glyph is a local visual stand-in and the component does not fetch model availability or pricing.
Source
Source: components/inputs/model-picker.tsx.
Full pack
components/inputs/model-picker.tsx is documented at /components/model-picker and installs only through the single Kansho full pack; no individual component install is offered.