Profile and settings
Desktop27 components135 variants4 recreations
Desktop settings screens: shell, profile, team members, roles, API keys, notifications, theme, security and danger zone.
$9, or included with Pro
Paywalls and pricing (Desktop)
Desktop packFlows
Desktop pricing pages, upgrade modals, billing, trials and cancel flows, with a guide to honest pricing.
- components
- 11
- variants
- 39
- recreations
- 4
- themes
- 2
Also for mobile: Paywalls and pricing
What’s inside
Tier cards, pricing tables, a billing toggle, feature matrix, enterprise contact, usage calculator, upgrade modal, billing page, seat selector, trial banner and cancel flow, each with states such as processing, past due, invalid and ending soon. An Honest pricing page sets out 10 rules and the dark patterns to avoid. Every page has a documentation frame and a live grid in Light and Dark, Comfortable and Compact.
- Upgrade, trial and cancel flows with every step
- Honest pricing guide with 10 rules
- 4 recreations from Linear, Notion, Vercel and Stripe
Tier card
Free sample4 variants
- Standard
- Recommended
- Current
- Custom
Pricing table
4 variants
- 3 tiers
- 4 tiers
- Annual
- Monthly
Billing toggle
4 variants
- Monthly
- Annual
- Badge
- Note
Feature matrix
3 variants
- Full
- Collapsed groups
- Sticky header
Enterprise contact
4 variants
- Band
- Form
- Form invalid
- Sent
Usage calculator
3 variants
- Within plan
- Over included
- Custom quote
Upgrade modal
4 variants
- Default
- Processing
- Error
- Success
Billing page
3 variants
- Active
- Past due
- Cancelling
Seat selector
3 variants
- Default
- Minimum
- Invalid
Trial banner
3 variants
- Active
- Ending soon
- Ended
Cancel flow
4 variants
- Reason
- Offer
- Confirm
- Done
- Figma file
- SuperDuper Pack: Paywalls and pricing (Desktop)
- Themes
- Light and Dark
- 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 Linear, Notion and Vercel 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.
Issue tracker pricing
Recreated from Linear
Docs workspace upgrade
Recreated from Notion
Hosting usage
Recreated from Vercel
Billing portal cancel
Recreated from Stripe customer portal
Not affiliated with, endorsed or sponsored by Linear, Notion, Vercel and Stripe customer portal. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the tier card full size, free
A pricing tier card in standard, recommended, current and custom versions. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More flows packs
Checkout and payments
Desktop12 components48 variants4 recreations
Desktop checkout pages, card and address forms, order summaries, invoices and payment results, ready to compose.
$9, or included with Pro
Auth and sign-in
Desktop13 components47 variants4 recreations
Desktop sign-in, sign-up, SSO, passkey, two-factor, magic link, password reset and invite screens with every state.
$9, or included with Pro
Questions about the paywalls and pricing pack
One Figma file: SuperDuper Pack: Paywalls and pricing (Desktop). It has 11 components with 39 variants, 4 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.