[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Ftags\u002Fpay-bill":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":33,"showcases":547,"links":548,"dates":610},"\u002Fexamples\u002Ftags\u002Fpay-bill","collection","screens",true,{"example_count":9,"app_count":10},992,192,{"id":12,"title":13,"description":14},208293,"Pay bill","",{"title":16,"description":17,"og_image":18},"Pay bill screen examples - Nicelydone","Pay bill screen design examples from SaaS apps. Browse examples from Sora, Shuttle, Monarch.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2c216f47-cb08-4deb-b354-21992e87c623.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"tags","\u002Fexamples\u002Ftags",{"label":27,"to":4},"Pay bill screen examples",{"title":27,"eyebrow":29,"description":17,"sections":30,"body":31},"Tag category",[],[32],"992 screens",[34,76,130,165,220,265,299,348,385,422,467,502],{"uuid":35,"title":36,"description":37,"canonical_path":38,"image":18,"width":39,"height":40,"image_alt":41,"published_at":42,"kind":43,"patterns":44,"component_categories":54,"app":63},"2c216f47-cb08-4deb-b354-21992e87c623","Sora","Onboarding step where the user selects a subscription tier between Free, Plus, and Pro plans for image and video generation.","\u002Fexamples\u002Fapps\u002Fsora\u002Fscreens",3024,1780,"Sora from Sora","2025-04-14T09:27:56.000Z","screen",[45],{"id":46,"label":47,"slug":48,"rank":49,"group":50},89,"Pricing","pricing",0,{"id":51,"label":52,"slug":53},9,"Plans & Limits","plans-and-limits",[55,59],{"id":56,"title":57,"slug":58},174,"Card","card",{"id":60,"title":61,"slug":62},175,"Button","button",{"slug":64,"title":36,"logo":65,"baseline":66,"categories":67},"sora","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsora-2oq6gygg.png","Bring your imagination to life with text, image, or video",[68,72],{"id":69,"title":70,"slug":71},80,"Artificial Intelligence","artificial-intelligence",{"id":73,"title":74,"slug":75},100,"Video","video",{"uuid":77,"title":78,"description":79,"canonical_path":80,"image":81,"width":39,"height":82,"image_alt":83,"published_at":84,"kind":43,"patterns":85,"component_categories":109,"app":116},"d2cf6f82-7f3f-44d6-8bf7-5173c1c42cd4","Shuttle – Your files. Your rules.","List view where the user is checking out via a payment modal, currently in a processing state after entering their billing address and tax ID.","\u002Fexamples\u002Fapps\u002Fshuttle\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd2cf6f82-7f3f-44d6-8bf7-5173c1c42cd4.png",1726,"Shuttle – Your files. Your rules. from Shuttle","2025-03-31T12:54:20.000Z",[86,94,100],{"id":87,"label":88,"slug":89,"rank":49,"group":90},130,"Checkout","checkout",{"id":91,"label":92,"slug":93},14,"Payments & Checkout","payments-and-checkout",{"id":95,"label":96,"slug":97,"rank":98,"group":99},131,"Payment Form","payment-form",1,{"id":91,"label":92,"slug":93},{"id":101,"label":102,"slug":103,"rank":104,"group":105},120,"Loading","loading",2,{"id":106,"label":107,"slug":108},12,"States & Feedback","states-and-feedback",[110,114,115],{"id":111,"title":112,"slug":113},284,"Modal","modal",{"id":56,"title":57,"slug":58},{"id":60,"title":61,"slug":62},{"slug":117,"title":118,"logo":119,"baseline":120,"categories":121},"shuttle","Shuttle","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fshuttle-1876ce5e.png","Manage and share your assets your way",[122,126],{"id":123,"title":124,"slug":125},71,"File sharing","file-sharing",{"id":127,"title":128,"slug":129},23,"Collaboration","collaboration",{"uuid":131,"title":132,"description":133,"canonical_path":134,"image":135,"width":39,"height":136,"image_alt":137,"published_at":138,"kind":43,"patterns":139,"component_categories":152,"app":155},"6efcb553-c1c4-4052-b948-faf2d8531fd5","Monarch | Select a plan","Checkout screen where the user reviews their yearly plan selection and enters payment details to start a 7-day free trial.","\u002Fexamples\u002Fapps\u002Fmonarch\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6efcb553-c1c4-4052-b948-faf2d8531fd5.png",1912,"Monarch | Select a plan from Monarch","2025-03-17T14:09:52.000Z",[140,142,144,149],{"id":87,"label":88,"slug":89,"rank":49,"group":141},{"id":91,"label":92,"slug":93},{"id":95,"label":96,"slug":97,"rank":98,"group":143},{"id":91,"label":92,"slug":93},{"id":145,"label":146,"slug":147,"rank":104,"group":148},91,"Trial","trial",{"id":51,"label":52,"slug":53},{"id":46,"label":47,"slug":48,"rank":150,"group":151},3,{"id":51,"label":52,"slug":53},[153,154],{"id":56,"title":57,"slug":58},{"id":60,"title":61,"slug":62},{"slug":156,"title":157,"logo":158,"baseline":159,"categories":160},"monarch","Monarch","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmonarch-58e7e32a.png","The modern way to manage money",[161],{"id":162,"title":163,"slug":164},36,"Finance","finance",{"uuid":166,"title":167,"description":168,"canonical_path":169,"image":170,"width":39,"height":171,"image_alt":172,"published_at":173,"kind":43,"patterns":174,"component_categories":186,"app":201},"8d344b17-062f-4034-a8d5-2b3c5ffbe4e5","Home - Replit","Paywall modal where a new user selects between monthly and yearly billing for the Core plan and enters their credit card details to continue.","\u002Fexamples\u002Fapps\u002Freplit\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8d344b17-062f-4034-a8d5-2b3c5ffbe4e5.png",1778,"Home - Replit from Replit","2025-03-10T14:11:20.000Z",[175,177,179,181],{"id":87,"label":88,"slug":89,"rank":49,"group":176},{"id":91,"label":92,"slug":93},{"id":95,"label":96,"slug":97,"rank":98,"group":178},{"id":91,"label":92,"slug":93},{"id":46,"label":47,"slug":48,"rank":104,"group":180},{"id":51,"label":52,"slug":53},{"id":182,"label":183,"slug":184,"rank":150,"group":185},114,"Confirmation","confirmation",{"id":106,"label":107,"slug":108},[187,191,192,196,200],{"id":188,"title":189,"slug":190},227,"Stepper","stepper",{"id":111,"title":112,"slug":113},{"id":193,"title":194,"slug":195},260,"Badge","badge",{"id":197,"title":198,"slug":199},240,"Horizontal navigation","horizontal-navigation",{"id":60,"title":61,"slug":62},{"slug":202,"title":203,"logo":204,"baseline":205,"categories":206},"replit","Replit","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freplit-7961c4fc.png","Turn your ideas into apps with AI",[207,208,212,216],{"id":69,"title":70,"slug":71},{"id":209,"title":210,"slug":211},48,"Developer Tools","developer-tools",{"id":213,"title":214,"slug":215},7,"Web Development","web-development",{"id":217,"title":218,"slug":219},96,"No code","no-code",{"uuid":221,"title":222,"description":223,"canonical_path":224,"image":225,"width":39,"height":226,"image_alt":227,"published_at":228,"kind":43,"patterns":229,"component_categories":239,"app":246},"250d11e6-92ec-4b89-947c-7dc86d053816","Front (6)","Settings page where the user selects a billing plan from four tiers, compares features, and can toggle between monthly and annual billing.","\u002Fexamples\u002Fapps\u002Ffront\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F250d11e6-92ec-4b89-947c-7dc86d053816.png",2258,"Front (6) from Front","2025-03-03T14:56:15.000Z",[230,232],{"id":46,"label":47,"slug":48,"rank":49,"group":231},{"id":51,"label":52,"slug":53},{"id":217,"label":233,"slug":234,"rank":98,"group":235},"Billing Settings","billing-settings",{"id":236,"label":237,"slug":238},10,"Settings & Admin","settings-and-admin",[240,244,245],{"id":241,"title":242,"slug":243},233,"Tabs","tabs",{"id":193,"title":194,"slug":195},{"id":197,"title":198,"slug":199},{"slug":247,"title":248,"logo":249,"baseline":250,"categories":251},"front","Front","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffront-f25c6b6e.png","Email redesigned for teams",[252,253,257,261],{"id":127,"title":128,"slug":129},{"id":254,"title":255,"slug":256},47,"Customer Service","customer-service",{"id":258,"title":259,"slug":260},82,"Communication","communication",{"id":262,"title":263,"slug":264},92,"Email","email",{"uuid":266,"title":267,"description":268,"canonical_path":269,"image":270,"width":39,"height":271,"image_alt":272,"published_at":273,"kind":43,"patterns":274,"component_categories":284,"app":292},"d8647112-9385-42b3-b6df-08dac7f12a97","Choose how to pay | WeTransfer","Checkout page where the user enters credit card and billing details to purchase a WeTransfer Ultimate monthly subscription, featuring an order summary and a yearly-billing upsell.","\u002Fexamples\u002Fapps\u002Fwetransfer\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd8647112-9385-42b3-b6df-08dac7f12a97.png",2204,"Choose how to pay | WeTransfer from WeTransfer","2025-02-24T16:12:09.000Z",[275,277,282],{"id":87,"label":88,"slug":89,"rank":49,"group":276},{"id":91,"label":92,"slug":93},{"id":278,"label":279,"slug":280,"rank":98,"group":281},132,"Payment Method","payment-method",{"id":91,"label":92,"slug":93},{"id":46,"label":47,"slug":48,"rank":104,"group":283},{"id":51,"label":52,"slug":53},[285,289,290,291],{"id":286,"title":287,"slug":288},177,"Breadcrumb","breadcrumb",{"id":197,"title":198,"slug":199},{"id":56,"title":57,"slug":58},{"id":60,"title":61,"slug":62},{"slug":293,"title":294,"logo":295,"baseline":296,"categories":297},"wetransfer","WeTransfer","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwetransfer-3e886b18.png","The simplest way to send your files around the world.",[298],{"id":123,"title":124,"slug":125},{"uuid":300,"title":301,"description":302,"canonical_path":303,"image":304,"width":39,"height":171,"image_alt":305,"published_at":306,"kind":43,"patterns":307,"component_categories":319,"app":327},"6167702c-2df8-427a-a2a8-3d7f5712c58e","Podia Change Plan","Billing settings page where the user can upgrade their active trial by choosing between the Mover and Shaker subscription plans.","\u002Fexamples\u002Fapps\u002Fpodia\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6167702c-2df8-427a-a2a8-3d7f5712c58e.png","Podia Change Plan from Podia","2025-02-17T15:29:05.000Z",[308,310,312,317],{"id":46,"label":47,"slug":48,"rank":49,"group":309},{"id":51,"label":52,"slug":53},{"id":217,"label":233,"slug":234,"rank":98,"group":311},{"id":236,"label":237,"slug":238},{"id":313,"label":314,"slug":315,"rank":104,"group":316},88,"Feature Gate","feature-gate",{"id":51,"label":52,"slug":53},{"id":182,"label":183,"slug":184,"rank":150,"group":318},{"id":106,"label":107,"slug":108},[320,321,325,326],{"id":286,"title":287,"slug":288},{"id":322,"title":323,"slug":324},189,"FAQ","faq",{"id":197,"title":198,"slug":199},{"id":60,"title":61,"slug":62},{"slug":328,"title":329,"logo":330,"baseline":331,"categories":332},"podia","Podia","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpodia-g4nl3lhm.png","Sell online courses, memberships, and downloads",[333,337,340,344],{"id":334,"title":335,"slug":336},32,"Education","education",{"id":98,"title":338,"slug":339},"Communities","communities",{"id":341,"title":342,"slug":343},27,"Email Newsletters","email-newsletters",{"id":345,"title":346,"slug":347},33,"E-Learning","e-learning",{"uuid":349,"title":350,"description":351,"canonical_path":352,"image":353,"width":39,"height":354,"image_alt":355,"published_at":356,"kind":43,"patterns":357,"component_categories":367,"app":371},"b7f4e668-9c44-431a-adee-249bdaaae249","Dub.co - Link Management for Modern Marketing Teams","Onboarding step where the user chooses between a Pro and Business subscription plan, with options for monthly or yearly billing.","\u002Fexamples\u002Fapps\u002Fdub\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb7f4e668-9c44-431a-adee-249bdaaae249.png",1966,"Dub.co - Link Management for Modern Marketing Teams from Dub","2025-02-17T13:43:13.000Z",[358,360],{"id":46,"label":47,"slug":48,"rank":49,"group":359},{"id":51,"label":52,"slug":53},{"id":361,"label":362,"slug":363,"rank":98,"group":364},74,"Onboarding Checklist","onboarding-checklist",{"id":213,"label":365,"slug":366},"Onboarding & Education","onboarding-and-education",[368,369,370],{"id":193,"title":194,"slug":195},{"id":56,"title":57,"slug":58},{"id":60,"title":61,"slug":62},{"slug":372,"title":373,"logo":374,"baseline":375,"categories":376},"dub","Dub","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdub-43tr8usg.png","Short links with superpowers",[377,381],{"id":378,"title":379,"slug":380},25,"Marketing","marketing",{"id":382,"title":383,"slug":384},46,"Analytics","analytics",{"uuid":386,"title":387,"description":388,"canonical_path":389,"image":390,"width":39,"height":171,"image_alt":391,"published_at":392,"kind":43,"patterns":393,"component_categories":400,"app":404},"ca75a6d7-bd19-474d-8284-a8c416971cb7","Motion","Checkout page where the user activates a 7-day free trial by selecting a billing cycle, choosing a seat count, and entering payment details alongside a timeline of the trial phases.","\u002Fexamples\u002Fapps\u002Fmotion\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fca75a6d7-bd19-474d-8284-a8c416971cb7.png","Motion from Motion","2025-02-10T16:08:17.000Z",[394,396,398],{"id":87,"label":88,"slug":89,"rank":49,"group":395},{"id":91,"label":92,"slug":93},{"id":145,"label":146,"slug":147,"rank":98,"group":397},{"id":51,"label":52,"slug":53},{"id":95,"label":96,"slug":97,"rank":104,"group":399},{"id":91,"label":92,"slug":93},[401,402,403],{"id":197,"title":198,"slug":199},{"id":56,"title":57,"slug":58},{"id":60,"title":61,"slug":62},{"slug":405,"title":387,"logo":406,"baseline":407,"categories":408},"motion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmotion-6fac92db.png","Use AI to plan your work, automatically",[409,410,414,418],{"id":69,"title":70,"slug":71},{"id":411,"title":412,"slug":413},29,"Task Management","task-management",{"id":415,"title":416,"slug":417},30,"Productivity","productivity",{"id":419,"title":420,"slug":421},101,"Calendar","calendar",{"uuid":423,"title":424,"description":425,"canonical_path":426,"image":427,"width":39,"height":171,"image_alt":428,"published_at":429,"kind":43,"patterns":430,"component_categories":450,"app":455},"cd20dceb-066a-4c57-884f-2cf02a3ce5e9","Billing Settings | Macaw","Settings page for billing and usage, overlaid with a modal to create a new team by entering a team name.","\u002Fexamples\u002Fapps\u002Fmacaw\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcd20dceb-066a-4c57-884f-2cf02a3ce5e9.png","Billing Settings | Macaw from Macaw","2025-01-28T12:48:11.000Z",[431,433,438,446],{"id":217,"label":233,"slug":234,"rank":49,"group":432},{"id":236,"label":237,"slug":238},{"id":434,"label":435,"slug":436,"rank":98,"group":437},104,"Team Management","team-management",{"id":236,"label":237,"slug":238},{"id":439,"label":440,"slug":441,"rank":104,"group":442},49,"Usage","usage",{"id":443,"label":444,"slug":445},4,"Data & Analysis","data-and-analysis",{"id":262,"label":447,"slug":448,"rank":150,"group":449},"Upgrade Prompt","upgrade-prompt",{"id":51,"label":52,"slug":53},[451,452,453,454],{"id":241,"title":242,"slug":243},{"id":111,"title":112,"slug":113},{"id":56,"title":57,"slug":58},{"id":60,"title":61,"slug":62},{"slug":456,"title":457,"logo":458,"baseline":459,"categories":460},"macaw","Macaw","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmacaw-l2yg9kds.png","Generate AI content that humans love to read",[461,462,466],{"id":378,"title":379,"slug":380},{"id":463,"title":464,"slug":465},59,"Writing tools","writing-tools",{"id":69,"title":70,"slug":71},{"uuid":468,"title":469,"description":470,"canonical_path":471,"image":472,"width":39,"height":171,"image_alt":473,"published_at":474,"kind":43,"patterns":475,"component_categories":489,"app":491},"1e3deb54-6c91-49de-ac49-c83dd2251862","Payment Integrations","Onboarding step where the user configures their business location and type to set up Kajabi Payments.","\u002Fexamples\u002Fapps\u002Fkajabi\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1e3deb54-6c91-49de-ac49-c83dd2251862.png","Payment Integrations from Kajabi","2025-01-27T19:31:18.000Z",[476,482,484],{"id":98,"label":477,"slug":478,"rank":49,"group":479},"Account Setup","account-setup",{"id":98,"label":480,"slug":481},"Access & Account","access-and-account",{"id":95,"label":96,"slug":97,"rank":98,"group":483},{"id":91,"label":92,"slug":93},{"id":485,"label":486,"slug":487,"rank":104,"group":488},102,"Settings","settings",{"id":236,"label":237,"slug":238},[490],{"id":60,"title":61,"slug":62},{"slug":492,"title":493,"logo":494,"baseline":495,"categories":496},"kajabi","Kajabi","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fkajabi-a4858d70.png","Where Creators Build Businesses",[497,498,499,500,501],{"id":334,"title":335,"slug":336},{"id":378,"title":379,"slug":380},{"id":98,"title":338,"slug":339},{"id":341,"title":342,"slug":343},{"id":345,"title":346,"slug":347},{"uuid":503,"title":504,"description":505,"canonical_path":506,"image":507,"width":39,"height":508,"image_alt":509,"published_at":510,"kind":43,"patterns":511,"component_categories":520,"app":535},"1bb6eb2e-f501-49c8-8822-99850eec986b","Pricing | Start for Free, Pay as you Grow  Instant","Pricing page where the user compares subscription tiers from Free to Enterprise, views a detailed feature matrix, and toggles between monthly and annual billing.","\u002Fexamples\u002Fapps\u002Finstant\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1bb6eb2e-f501-49c8-8822-99850eec986b.png",18408,"Pricing | Start for Free, Pay as you Grow  Instant from Instant","2025-01-20T16:16:40.000Z",[512],{"id":513,"label":514,"slug":515,"rank":49,"group":516},143,"Pricing Page","pricing-page",{"id":517,"label":518,"slug":519},15,"Marketing Page Types","marketing-page-types",[521,525,529,533,534],{"id":522,"title":523,"slug":524},258,"Header","header",{"id":526,"title":527,"slug":528},232,"Testimonial","testimonial",{"id":530,"title":531,"slug":532},202,"Footer","footer",{"id":322,"title":323,"slug":324},{"id":193,"title":194,"slug":195},{"slug":536,"title":537,"logo":538,"baseline":539,"categories":540},"instant","Instant","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Finstant-7cp012gu.png","The Shopify store builder",[541,542,543],{"id":217,"title":218,"slug":219},{"id":213,"title":214,"slug":215},{"id":544,"title":545,"slug":546},8,"Design","design",[],[549,551,554,556,558,560,562,564,566,568,570,572,574,577,580,583,586,589,592,595,598,601,604,607],{"label":47,"to":550,"count":213},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":88,"to":552,"count":553},"\u002Fexamples\u002Fscreens\u002Fcheckout",5,{"label":96,"to":555,"count":553},"\u002Fexamples\u002Fscreens\u002Fpayment-form",{"label":233,"to":557,"count":150},"\u002Fexamples\u002Fscreens\u002Fbilling-settings",{"label":183,"to":559,"count":104},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":146,"to":561,"count":104},"\u002Fexamples\u002Fscreens\u002Ftrial",{"label":477,"to":563,"count":98},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":314,"to":565,"count":98},"\u002Fexamples\u002Fscreens\u002Ffeature-gate",{"label":102,"to":567,"count":98},"\u002Fexamples\u002Fscreens\u002Floading",{"label":362,"to":569,"count":98},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":279,"to":571,"count":98},"\u002Fexamples\u002Fscreens\u002Fpayment-method",{"label":486,"to":573,"count":98},"\u002Fexamples\u002Fscreens\u002Fsettings",{"label":575,"to":576},"Sora design examples","\u002Fexamples\u002Fapps\u002Fsora",{"label":578,"to":579},"Shuttle design examples","\u002Fexamples\u002Fapps\u002Fshuttle",{"label":581,"to":582},"Monarch design examples","\u002Fexamples\u002Fapps\u002Fmonarch",{"label":584,"to":585},"Replit design examples","\u002Fexamples\u002Fapps\u002Freplit",{"label":587,"to":588},"Front design examples","\u002Fexamples\u002Fapps\u002Ffront",{"label":590,"to":591},"WeTransfer design examples","\u002Fexamples\u002Fapps\u002Fwetransfer",{"label":593,"to":594},"Podia design examples","\u002Fexamples\u002Fapps\u002Fpodia",{"label":596,"to":597},"Dub design examples","\u002Fexamples\u002Fapps\u002Fdub",{"label":599,"to":600},"Motion design examples","\u002Fexamples\u002Fapps\u002Fmotion",{"label":602,"to":603},"Macaw design examples","\u002Fexamples\u002Fapps\u002Fmacaw",{"label":605,"to":606},"Kajabi design examples","\u002Fexamples\u002Fapps\u002Fkajabi",{"label":608,"to":609},"Instant design examples","\u002Fexamples\u002Fapps\u002Finstant",{"published_at":611,"updated_at":612},"2025-01-19T13:13:57.000Z","2026-09-09T17:07:16.000Z"]