Pricing with Billing Toggle
Three-tier pricing with monthly/yearly toggle, one highlighted plan, feature lists with checks and a footnote on taxes.
Component code: PricingToggle.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a pricing section whose numbers a visitor can trust: toggle changes every price consistently, the recommended plan is obvious but not shouty.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion (layout animation on price change).
LAYOUT
Layout
Centred header (H2 + subhead + toggle pill Monthly/Yearly with "save 20%" tag). Three cards in a row; middle card raised (scale 1.03, primary border, "Most popular" chip). Card: plan name, price with animated number swap, per-line, CTA button, divider, feature list with check icons, footnote link. Under the row: one-line footnote about taxes and cancellation.
TYPOGRAPHY
Typography
Price: 3rem/700 tabular. Plan name: 1.1rem/600. Features: 0.95rem leading 1.5.
COLOR TOKENS
Color Tokens
--background: 240 20% 98%; --card: 0 0% 100%; --foreground: 240 20% 10%; --primary: 250 80% 60%; --primary-foreground: 0 0% 100%; --muted-foreground: 240 10% 45%; --border: 240 15% 90%.
SPACING
Spacing
Cards gap 1.5rem; card padding 2rem; toggle margin 2rem auto.
ANIMATION
Animation
Price digits cross-fade/slide on toggle (AnimatePresence, 0.25s). Cards fade-up staggered on view. Reduced motion: instant swap.
RESPONSIVE
Responsive
<lg: cards stack, popular card first; toggle stays centred and ≥44px tall.
SAMPLE COPY
Sample Copy
Plans: "Starter — $0 — 3 projects, community support"; "Pro — $12/mo yearly, $15 monthly — unlimited projects, automations, priority support"; "Team — $29/mo yearly, $36 monthly — everything in Pro, roles, audit log, SSO". Footnote: "Prices in USD, taxes may apply. Cancel anytime; yearly plans refund pro-rata within 30 days."