Monthly and Yearly on one tray. The active pill slides across and the price rolls.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/billing-switchPlayground
$24 a month
Plan card
PlanPro
$24 a month
Switch to yearly and save $58.
Monthly
$24 a month
Yearly
$19 a month
Disabled
$24 a month
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/billing-switch
Accessibility
- A radiogroup with one tab stop.
- The price is a live region.
Motion
- The pill slides on the jump spring, 500 and 34.
- Price digits roll.
- With reduced motion, both change at once.
Responsive behavior
- Fits its content, and centres on Mobile.
Performance
- The pill's shared layout id comes from useId, so two switches on a page never fight.
- The price rolls through RollingText, and only when the period changes.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import
BillingSwitchfrom@/components/fetaui/billing-switch. pricesis the monthly price in each period, not the yearly total.onValueChangereturnsmonthlyoryearly. Use it to update the plans around it, because the demo changes nothing else.saveis the chip on Yearly. An empty string hides it. It uses no other fetaUI component.
Related
Pricing CardProBlockA plan card with name, price, description, features and one Button.Plan CardComponentOne plan: name, price, pitch, features and a full width Button.Plan OptionProBlockA selectable plan or pack. Selected washes the Row and rings the Card.Pricing · PlansProBlockThree subscription plans with the Popular one in the middle.Toggle GroupComponentToggles on one tray, for a single choice or several.