In-app plan pickerPro

Plans compared by model access, limits and speed with the recommended plan preselected, a monthly or yearly switch where prices roll, the current plan marked and a downgrade warning that lists what goes away.

Markdown

On this page

ProPlans by models, usage and speed with Pro preselected. Switch billing and the prices roll.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/in-app-plan-picker

Usage

tsx

import { InAppPlanPicker } from "@/components/ui/chatcn/pro/in-app-plan-picker"

<InAppPlanPicker
  plans={plans}
  currentPlanId={account.plan}
  periodEnd={account.periodEnd}
  onConfirm={(plan, billing) => billing.switchPlan(plan, billing)}
/>

List plans from lowest to highest tier; the order decides what counts as a downgrade. Rows line up across plans with CSS subgrid, so models, usage and speed compare at a glance. The yearly saving is the largest discount across plans.

Examples

Downgrade warning

ProMoving from Max to Pro lists the models, limits and speed that go away, and when.

States

ProSwitching, a failed switch with the fix, and the current plan selected.

Props

Prop	Type	Notes
`plans`	`PickerPlan[]`	`id`, `name`, `description?`, `price: { monthly, yearly }`, `models`, `limit`, `speed: { label, level }`, `recommended?`
`currentPlanId`	`string`	Marked Current plan
`value`, `defaultValue`, `onValueChange`	`string`	Defaults to the recommended plan
`billing`, `defaultBilling`, `onBillingChange`	`"monthly" \| "yearly"`	Default yearly
`periodEnd`	`Date \| string \| number`	When a downgrade takes effect
`onConfirm`	`(planId, billing) => unknown`	Return a promise for progress; reject for the error
`status`, `error`		Control the states yourself
`title`, `description`, `currency`, `locale`
`labels`	`Partial<InAppPlanPickerLabels>`	Every string the plan picker shows or announces, for translation

Keyboard

Key	Action
Arrow keys	Move between plans and between Monthly and Yearly
`Tab`	Billing switch, plans, then the confirm button

Accessibility

Plans and billing are native radio groups. Recommended and Current plan are words, not colors.
The speed meter is decorative; its label is the text next to it. The downgrade warning is a note above the action.

Motion

Switching billing rolls each price digit by digit in 280 ms. The downgrade warning fades in over 150 ms. Selection is instant.
Reduced motion swaps digits at once.