Model upsellPro

Locked premium models inside the model list with a lock badge, what each unlocks and one upgrade action. A drop-in for the free model picker that also renders inline.

Markdown

On this page

ProThe composer model menu with premium models locked in place and a pane that says what each unlocks.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/model-upsell

Usage

tsx

import { ModelUpsell } from "@/components/ui/chatcn/pro/model-upsell"

<ModelUpsell
  models={models} // free picker models, plus plan and unlocks on locked ones
  value={model}
  onValueChange={setModel}
  onUpgrade={(m) => openCheckout(m.plan)}
/>

Models use the free ModelOption shape. Add plan to lock one, unlocks for what it gives, and highlights for a few key numbers. Locked models stay reachable with the arrow keys so people can read what they unlock; Enter on one starts the upgrade, Enter on an unlocked one picks it.

Examples

Inline list

ProThe same list rendered in place for a settings page.

With the free picker

lockedAsDisabled(models) turns locked models into disabled rows that name their plan, for the plain free ModelPicker in dense toolbars.

ProLocked models as disabled rows in the free model picker, for dense toolbars.

Props

Prop	Type	Notes
`models`	`UpsellModelOption[]`	`ModelOption` plus `plan?`, `unlocks?`, `highlights?`
`providers`	`ModelProvider[]`	Group names and order
`value`, `defaultValue`, `onValueChange`	`string`	Only unlocked models can be picked
`onUpgrade`	`(model) => unknown`	Return a promise to show progress
`upgradeLabel`	`(plan) => string`	Default Upgrade to {plan}
`renderProviderMark`	`(id) => ReactNode`	Your provider marks
`inline`	`boolean`	Render in place without a trigger
`loading`, `disabled`, `size`, `side`, `align`, `open`, `onOpenChange`		As in the free picker
`labels`	`Partial<ModelUpsellLabels>`	Every string the upsell shows or announces, for translation

Keyboard

Key	Action
Typing	Filters by name, provider, plan or capability
`ArrowUp`, `ArrowDown`	Move, locked models included
`Enter`	Pick, or upgrade on a locked model
`Tab`	Reach the upgrade button in the detail pane

Accessibility

Locked options carry a description that names the plan; the badge reads as Pro plan.
The detail pane is a polite live region and describes the search box while a locked model is active.

Motion

The popover grows from the trigger in 180 ms. Highlight and the detail pane change instantly: they follow the keyboard.