Billing & Pricing

Overview

Pricing UI converts — clarity beats cleverness. Show plans side by side, make the recommended one obvious, let users toggle billing period, and put honest upgrade prompts at the moments users hit a limit. The UI is presentation only; entitlements and prices are enforced server-side.

When to use

• Building a pricing page or plan-selection step.
• Adding paywalls, usage meters, or "upgrade" prompts.
• Gating features behind a plan in the UI.

Pricing cards with billing toggle

const [annual, setAnnual] = React.useState(true);