Billing And Pricing

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);

  Monthly
  
  
    Annual Save 20%
  

  {plans.map((plan) => (
    
      {plan.recommended && (
        Most popular
      )}
      
        {plan.name}
        {plan.tagline}
        
          
            ${annual ? plan.annual : plan.monthly}
          
          /mo
        
      
      
        
          {plan.features.map((f) => (
            
               {f}
            
          ))}
        
      
      
        
          {plan.cta ?? "Choose plan"}
        
      
    
  ))}

Highlight one plan

Anchor choice with a single "Most popular" plan — stronger border, a badge, and a filled CTA while others use outline. One emphasized option reduces decision paralysis.

Usage meters & soft limits

Warn before users hit a wall, not after:

  
    Seats{used} / {limit}
  
  
  {used / limit > 0.8 && (
    You're approaching your seat limit. Upgrade
  )}

Paywalls & upgrade prompts

• Gate the action, not the whole UI — show the feature, then an upgrade CTA on use.
• Contextual prompt: name the benefit ("Upgrade to Pro for unlimited projects"), not just "Upgrade."
• Current plan shows "Current plan" disabled; others show upgrade/downgrade.

Pitfalls

• No annual/monthly toggle — or not showing the savings.
• Every plan visually equal — highlight one to guide choice.
• Hard paywall with no preview — show what they're missing.
• Limits only enforced client-side — the server owns entitlements; UI just reflects them.
• Vague CTAs ("Submit") instead of "Start free trial" / "Upgrade to Pro."
• Prices not tabular-nums — misaligned digits look sloppy.

Hand-off

Conversion surfaces that link from dashboard-layout usage meters and settings-pages billing; gate flows pair with modals-and-dialogs and notifications-and-toasts.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: param087
• Source: param087/saas-ui-skills
• License: MIT

Install and usage instructions live in the source repository linked above.