Auth and sign-in
Mobile15 components83 variants4 recreations
Mobile sign-in screens and parts, from social buttons and passkeys to codes, two-factor and locked accounts.
$9, or included with Pro
Paywalls and pricing (Mobile)
Mobile packFlows
Mobile paywalls, plan cards, trial timelines, upsell sheets and offers, built around honest pricing.
- components
- 14
- variants
- 80
- recreations
- 6
- themes
- 5
Also for desktop: Paywalls and pricing
What’s inside
Twelve paywall patterns for phones: hero and tiered paywalls, plan cards, savings badges, trial timelines, feature comparisons, social proof, upsell sheets, locked content gates, discount and win-back offers and a legal footer. Each page sets out honest pricing rules and the dark patterns to avoid, and a guide page covers app store and consumer law context.
- Billed price first on every plan card
- Honest pricing guide with a dark-pattern catalogue
- 6 recreations of real app paywalls, flaws noted
Hero paywall
8 variants
- Default
- Loading
- Purchasing
- Error
Plan card
Free sample20 variants
- Default
- Pressed
- Focus
- Disabled
- Loading
Plan group
4 variants
- Default
- Invalid
Savings badge
6 variants
- Strong
- Subtle
- Success
Trial timeline
4 variants
- Default
- Loading
Feature comparison
3 variants
- Checklist
- Two plans
- Three plans
Social proof block
3 variants
- Rating
- Review
- Count
Upsell sheet
4 variants
- Default
- Purchasing
- Error
- Success
Locked content gate
6 variants
- Default
- Pressed
- Focus
Discount offer
3 variants
- Active
- Claimed
- Expired
Restore and legal footer
8 variants
- Default
- Restoring
- Restored
- Nothing found
Win-back offer
3 variants
- Default
- Restarting
- Restarted
Tier tabs
6 variants
- Default
- Focus
Tiered paywall
2 variants
- Figma file
- SuperDuper Pack: Paywalls and Pricing (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 2 screen patterns
- Paywall and Pricing & plans
How Duolingo, Headspace and Spotify and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Plan card
Recreated from Duolingo
Plan option
Recreated from Headspace
Tier card
Recreated from Spotify
Reminder row
Recreated from Calm
Model switcher
Recreated from ChatGPT
Period card
Recreated from Bumble
Not affiliated with, endorsed or sponsored by Duolingo, Headspace, Spotify, Calm, ChatGPT and Bumble. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the plan card full size, free
The plan card as a row and a tile, selected or not, in every state including pressed, focus and loading. All 20 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More flows packs
Onboarding and walkthroughs
Mobile20 components128 variants4 recreations
Mobile onboarding screens from splash to celebration, with questions, goals, permissions and tutorials.
$9, or included with Pro
Checkout and payments
Mobile14 components43 variants4 recreations
Mobile checkout from basket to receipt: addresses, delivery slots, cards, wallets, promo codes, tips and orders.
$9, or included with Pro
Questions about the paywalls and pricing pack
One Figma file: SuperDuper Pack: Paywalls and Pricing (Mobile). It has 14 components with 80 variants, 6 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.