Pricing (Web app)
The in-product plan comparison that converts an active free or trial account onto a paid tier.
Monetization & Billing · 7 checks · 8 resources
Before you ship
7- 01Plan names, prices and frequency — the name and cost of each available plan, with billing frequency clearly stated
- 02Billing period toggle — a switch between monthly and annual billing, with the annual discount shown
- 03Feature comparison — a side-by-side breakdown of what each plan includes and excludes
- 04Call to action — a button on each plan to start a trial, subscribe, or contact sales
- 05Free tier or trial details — what's included, how long it lasts, and what happens when it ends
- 06FAQ section — answers to common questions about billing, plan limits, cancellation, and payment
- 07Enterprise option — a prompt for organisations that need a custom arrangement beyond the listed plans
Resources that help you build this
8- Chakra UI · 114 accessible React components with a token-driven styling system
- NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JS
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- abtest.design · 47 documented A/B tests from Blinkist, Duolingo, Headspace, Uber and others, each with the winning variant and the measured lift
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocks
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UI
- Tailwind Plus · 500+ paid Tailwind UI blocks, 13 Next.js templates and the Catalyst React kit
- Nicely Done · Searchable index of ~199k SaaS screens, 12.5k flows and 29k UI components