Price Flip Pricing
Plans with two periods: a switch flips every price on its axis to monthly or yearly, per session or pack.
Controls
<PricingPriceFlip />About
In Standard's proposed curated Pro set. The free pricing-tiers has one price per plan.
Use it when
- Plans have two billing periods or a session and a pack price.
Skip it when
- One price per plan: use
pricing-tiers.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Heading | text | 60 chars | — |
| lead | Intro | text | 160 chars | — |
| plans | Plans | list | up to 4 | — |
| plans[].name | Plan | text | 32 chars | — |
| plans[].price | Price | price | 32 chars | Yes, a fill-in until given |
| plans[].period | Period | text | 16 chars | — |
| plans[].description | Description | text | 140 chars | — |
| plans[].features | Included | list | up to 8 | — |
| plans[].features[] | Included | text | 60 chars | Can be a fill-in |
| plans[].action | Button | action | 24 chars | — |
| plans[].recommended | Recommended | flag | — | — |
| plans[].altPrice | Price, second period | price | 32 chars | Yes, a fill-in until given |
| plans[].altPeriod | Second period | text | 16 chars | — |
| recommendedLabel | Recommended badge | text | 20 chars | — |
| note | Note | text | 160 chars | — |
| periods.primary | First period | text | 16 chars | — |
| periods.alternate | Second period | text | 16 chars | — |
Variants
Columnsdefault
columns
Plan cards side by side, centred switch.
Stacked
stacked
One row per plan.
Accessibility and motion
- Keyboard
- The switch is a radio group (arrow keys); then each plan's action.
- Screen readers
- The switch announces the period; each plan reads its current price.
- Touch
- Both switch options are 36 px tall pills.
- Reduced motion
- Prices swap without turning.
Edge cases and limits
- Without JavaScript the first period shows.
Related
Pricing Tiers
FreeOne to four plans as cards, stacked rows or a wide banner; prices are facts the business sets.
Pricing block · Server
Menu cards that turn over: photo, name and price in front; the description and tag behind.
Menus block · CSS