[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fscreens\u002Fbilling-settings":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":37,"showcases":510,"links":511,"dates":563},"\u002Fexamples\u002Fscreens\u002Fbilling-settings","collection","screens",true,{"example_count":9,"app_count":10},3295,385,{"id":12,"title":13,"description":14},96,"Billing Settings","See how SaaS apps organize subscription details, invoices, and billing information. Browse layouts that separate the current plan from payment settings and changes to future charges.",{"title":16,"description":17,"og_image":18},"Billing Settings screen examples - Nicelydone","Billing Settings screen design examples from SaaS apps. See how SaaS apps organize subscription details, invoices, and billing information. Browse layouts…","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5d4f2529-c61f-49af-99ee-97e9390d79d6.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS screen examples","\u002Fexamples\u002Fscreens",{"label":27,"to":4},"Billing Settings screen examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"Screen category","Billing Settings screen design examples from SaaS apps. See how SaaS apps organize subscription details, invoices, and billing information. Browse layouts that separate the current plan from payment settings and…",[32],{"title":33,"description":14,"links":34},"About Billing Settings",[],[36],"3295 screens",[38,109,158,206,230,271,314,347,379,416,453,477],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"published_at":46,"kind":47,"patterns":48,"component_categories":74,"app":91},"5d4f2529-c61f-49af-99ee-97e9390d79d6","Usage - Bud","Settings page where the user views their monthly credit limit usage and account activity history.","\u002Fexamples\u002Fapps\u002Fbud\u002Fscreens",3024,1714,"Usage - Bud from Bud","2026-09-21T19:04:27.000Z","screen",[49,58,65],{"id":50,"label":51,"slug":52,"rank":53,"group":54},49,"Usage","usage",0,{"id":55,"label":56,"slug":57},4,"Data & Analysis","data-and-analysis",{"id":12,"label":13,"slug":59,"rank":60,"group":61},"billing-settings",1,{"id":62,"label":63,"slug":64},10,"Settings & Admin","settings-and-admin",{"id":66,"label":67,"slug":68,"rank":69,"group":70},92,"Upgrade Prompt","upgrade-prompt",2,{"id":71,"label":72,"slug":73},9,"Plans & Limits","plans-and-limits",[75,79,83,87],{"id":76,"title":77,"slug":78},223,"Slider","slider",{"id":80,"title":81,"slug":82},169,"Avatar","avatar",{"id":84,"title":85,"slug":86},174,"Card","card",{"id":88,"title":89,"slug":90},175,"Button","button",{"slug":92,"title":93,"logo":94,"baseline":95,"categories":96},"bud","Bud","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb0427c87-61b8-484c-bf46-129e1c0ebd42.png","Bud is an AI worker with its own computer, browser, and number to run autonomously and get work done.",[97,101,105],{"id":98,"title":99,"slug":100},80,"Artificial Intelligence","artificial-intelligence",{"id":102,"title":103,"slug":104},103,"Demo Automation","demo-automation",{"id":106,"title":107,"slug":108},105,"Workflow Automation","workflow-automation",{"uuid":110,"title":111,"description":112,"canonical_path":113,"image":114,"width":43,"height":115,"image_alt":116,"published_at":117,"kind":47,"patterns":118,"component_categories":128,"app":136},"94e06b94-86e1-4ca8-9c4e-804c1ce93534","Alice Morgan · Usage | Nicelydone | Polar","Detail page where the user views usage metrics and billing events for a specific customer within a sandbox environment.","\u002Fexamples\u002Fapps\u002Fpolar\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F94e06b94-86e1-4ca8-9c4e-804c1ce93534.png",1758,"Alice Morgan · Usage | Nicelydone | Polar from Polar","2026-09-21T19:01:38.000Z",[119,121,123],{"id":50,"label":51,"slug":52,"rank":53,"group":120},{"id":55,"label":56,"slug":57},{"id":12,"label":13,"slug":59,"rank":60,"group":122},{"id":62,"label":63,"slug":64},{"id":124,"label":125,"slug":126,"rank":69,"group":127},47,"Table","table",{"id":55,"label":56,"slug":57},[129,133,134,135],{"id":130,"title":131,"slug":132},233,"Tabs","tabs",{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":137,"title":138,"logo":139,"baseline":140,"categories":141},"polar","Polar","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpolar-3d0012c1.png","Sell SaaS and digital products in minutes",[142,146,150,154],{"id":143,"title":144,"slug":145},36,"Finance","finance",{"id":147,"title":148,"slug":149},39,"Payments","payments",{"id":151,"title":152,"slug":153},48,"Developer Tools","developer-tools",{"id":155,"title":156,"slug":157},37,"Developer APIs","developer-apis",{"uuid":159,"title":160,"description":161,"canonical_path":162,"image":163,"width":43,"height":115,"image_alt":164,"published_at":165,"kind":47,"patterns":166,"component_categories":176,"app":191},"a7b99786-43c3-4c3d-ba61-7d6c967d14ef","Subscription | Magnific (formerly Freepik)","Settings page where the user manages their subscription plan, views credit usage, and updates billing and payment information.","\u002Fexamples\u002Fapps\u002Fmagnific\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa7b99786-43c3-4c3d-ba61-7d6c967d14ef.png","Subscription | Magnific (formerly Freepik) from Magnific","2026-09-14T12:05:04.000Z",[167,169,174],{"id":12,"label":13,"slug":59,"rank":53,"group":168},{"id":62,"label":63,"slug":64},{"id":170,"label":171,"slug":172,"rank":60,"group":173},89,"Pricing","pricing",{"id":71,"label":72,"slug":73},{"id":50,"label":51,"slug":52,"rank":69,"group":175},{"id":55,"label":56,"slug":57},[177,181,185,189,190],{"id":178,"title":179,"slug":180},167,"Alert","alert",{"id":182,"title":183,"slug":184},177,"Breadcrumb","breadcrumb",{"id":186,"title":187,"slug":188},260,"Badge","badge",{"id":80,"title":81,"slug":82},{"id":88,"title":89,"slug":90},{"slug":192,"title":193,"logo":194,"baseline":195,"categories":196},"magnific","Magnific","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F07fe44bd-fed6-494e-8806-f1effa3458cb.png","The creative platform to direct your best work.",[197,201,205],{"id":198,"title":199,"slug":200},8,"Design","design",{"id":202,"title":203,"slug":204},15,"Media and Entertainment","media-and-entertainment",{"id":98,"title":99,"slug":100},{"uuid":207,"title":208,"description":209,"canonical_path":210,"image":211,"width":43,"height":115,"image_alt":212,"published_at":213,"kind":47,"patterns":214,"component_categories":219,"app":223},"c354d9be-8cb7-4766-ab4f-61a97055e5cb","Resource Quotas – Dashboard - Latitude.sh","Settings page where the user views their current resource usage and quotas for bare metal, virtual machines, and storage, with options to request increases.","\u002Fexamples\u002Fapps\u002Flatitude-2\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc354d9be-8cb7-4766-ab4f-61a97055e5cb.png","Resource Quotas – Dashboard - Latitude.sh from Latitude.sh","2026-09-14T11:09:31.000Z",[215,217],{"id":50,"label":51,"slug":52,"rank":53,"group":216},{"id":55,"label":56,"slug":57},{"id":12,"label":13,"slug":59,"rank":60,"group":218},{"id":62,"label":63,"slug":64},[220,221,222],{"id":186,"title":187,"slug":188},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":224,"title":225,"logo":226,"baseline":227,"categories":228},"latitude-2","Latitude.sh","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F855c8d51-549e-4924-978d-a865acc9f11a.png","Deploy and manage fully automated bare metal servers globally",[229],{"id":151,"title":152,"slug":153},{"uuid":231,"title":232,"description":233,"canonical_path":234,"image":235,"width":43,"height":115,"image_alt":236,"published_at":237,"kind":47,"patterns":238,"component_categories":251,"app":259},"bc671340-a39e-43e1-9751-68b8686363d4","Nicely Done » New view","Settings view where the user checks their current free plan and can upgrade to a Pro tier by providing credit card details.","\u002Fexamples\u002Fapps\u002Falloy\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbc671340-a39e-43e1-9751-68b8686363d4.png","Nicely Done » New view from Alloy","2026-09-14T10:58:46.000Z",[239,241,243],{"id":12,"label":13,"slug":59,"rank":53,"group":240},{"id":62,"label":63,"slug":64},{"id":66,"label":67,"slug":68,"rank":60,"group":242},{"id":71,"label":72,"slug":73},{"id":244,"label":245,"slug":246,"rank":69,"group":247},131,"Payment Form","payment-form",{"id":248,"label":249,"slug":250},14,"Payments & Checkout","payments-and-checkout",[252,256,257,258],{"id":253,"title":254,"slug":255},284,"Modal","modal",{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":260,"title":261,"logo":262,"baseline":263,"categories":264},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[265,266,267],{"id":151,"title":152,"slug":153},{"id":98,"title":99,"slug":100},{"id":268,"title":269,"slug":270},86,"Product management","product-management",{"uuid":272,"title":273,"description":274,"canonical_path":275,"image":276,"width":43,"height":115,"image_alt":277,"published_at":278,"kind":47,"patterns":279,"component_categories":286,"app":297},"a9b83376-9255-48bb-9f19-7f52670ca3bb","Flask","Settings page where the user manages their team's seats and subscription plan, choosing between Free, Pro, and Large Teams tiers.","\u002Fexamples\u002Fapps\u002Fflask\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa9b83376-9255-48bb-9f19-7f52670ca3bb.png","Flask from Flask","2026-09-07T12:11:43.000Z",[280,282,284],{"id":170,"label":171,"slug":172,"rank":53,"group":281},{"id":71,"label":72,"slug":73},{"id":12,"label":13,"slug":59,"rank":60,"group":283},{"id":62,"label":63,"slug":64},{"id":66,"label":67,"slug":68,"rank":69,"group":285},{"id":71,"label":72,"slug":73},[287,291,295,296],{"id":288,"title":289,"slug":290},257,"Input number","input-number",{"id":292,"title":293,"slug":294},168,"Accordion","accordion",{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":298,"title":273,"logo":299,"baseline":300,"categories":301},"flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[302,306,310],{"id":303,"title":304,"slug":305},100,"Video","video",{"id":307,"title":308,"slug":309},23,"Collaboration","collaboration",{"id":311,"title":312,"slug":313},35,"Feedback","feedback",{"uuid":315,"title":316,"description":317,"canonical_path":318,"image":319,"width":43,"height":115,"image_alt":320,"published_at":321,"kind":47,"patterns":322,"component_categories":329,"app":334},"59e99de6-0fa3-493a-b265-690909ade185","Dashboard | inference.net","Settings page where the user manages their prepaid wallet by adding funds, configuring automatic top-ups, and reviewing transaction history.","\u002Fexamples\u002Fapps\u002Finference\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F59e99de6-0fa3-493a-b265-690909ade185.png","Dashboard | inference.net from Inference","2026-09-07T10:14:44.000Z",[323,325,327],{"id":12,"label":13,"slug":59,"rank":53,"group":324},{"id":62,"label":63,"slug":64},{"id":50,"label":51,"slug":52,"rank":60,"group":326},{"id":55,"label":56,"slug":57},{"id":124,"label":125,"slug":126,"rank":69,"group":328},{"id":55,"label":56,"slug":57},[330,331,332,333],{"id":130,"title":131,"slug":132},{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":335,"title":336,"logo":337,"baseline":338,"categories":339},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[340,341,345,346],{"id":151,"title":152,"slug":153},{"id":342,"title":343,"slug":344},16,"Monitoring","monitoring",{"id":155,"title":156,"slug":157},{"id":98,"title":99,"slug":100},{"uuid":348,"title":349,"description":350,"canonical_path":351,"image":352,"width":43,"height":115,"image_alt":353,"published_at":354,"kind":47,"patterns":355,"component_categories":363,"app":368},"864c186b-419b-4e65-950f-573a082a4125","Origin Financial","Settings page where the user views their current annual membership plan details, expiration date, and billing provider.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F864c186b-419b-4e65-950f-573a082a4125.png","Origin Financial from Origin Financial","2026-08-31T10:47:43.000Z",[356,361],{"id":357,"label":358,"slug":359,"rank":53,"group":360},94,"Account Settings","account-settings",{"id":62,"label":63,"slug":64},{"id":12,"label":13,"slug":59,"rank":60,"group":362},{"id":62,"label":63,"slug":64},[364,365,366,367],{"id":130,"title":131,"slug":132},{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":369,"title":349,"logo":370,"baseline":371,"categories":372},"useorigin","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[373,374,378],{"id":143,"title":144,"slug":145},{"id":375,"title":376,"slug":377},56,"Accounting","accounting",{"id":98,"title":99,"slug":100},{"uuid":380,"title":381,"description":382,"canonical_path":383,"image":384,"width":43,"height":115,"image_alt":385,"published_at":386,"kind":47,"patterns":387,"component_categories":394,"app":403},"c47f1059-4b72-41c9-9451-4ecfe7ba1265","Steel | Open-source Headless Browser API","Settings page where the user views their current month's usage, daily breakdown, and available subscription plans to upgrade.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc47f1059-4b72-41c9-9451-4ecfe7ba1265.png","Steel | Open-source Headless Browser API from Steel","2026-08-31T08:39:06.000Z",[388,390,392],{"id":50,"label":51,"slug":52,"rank":53,"group":389},{"id":55,"label":56,"slug":57},{"id":12,"label":13,"slug":59,"rank":60,"group":391},{"id":62,"label":63,"slug":64},{"id":170,"label":171,"slug":172,"rank":69,"group":393},{"id":71,"label":72,"slug":73},[395,399,400,401,402],{"id":396,"title":397,"slug":398},240,"Horizontal navigation","horizontal-navigation",{"id":186,"title":187,"slug":188},{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":404,"title":405,"logo":406,"baseline":407,"categories":408},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[409,410,411,412],{"id":151,"title":152,"slug":153},{"id":98,"title":99,"slug":100},{"id":155,"title":156,"slug":157},{"id":413,"title":414,"slug":415},45,"Open Source","open-source",{"uuid":417,"title":418,"description":419,"canonical_path":420,"image":421,"width":43,"height":115,"image_alt":422,"published_at":423,"kind":47,"patterns":424,"component_categories":431,"app":437},"2078e873-a3a4-4791-bede-453da1029174","Zaro - The Context Layer for Enterprise AI","Settings page where the user manages their subscription plan, views available credits, and can upgrade to Launch, Growth, or Enterprise tiers.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2078e873-a3a4-4791-bede-453da1029174.png","Zaro - The Context Layer for Enterprise AI from Zaro","2026-08-24T10:01:28.000Z",[425,427,429],{"id":12,"label":13,"slug":59,"rank":53,"group":426},{"id":62,"label":63,"slug":64},{"id":170,"label":171,"slug":172,"rank":60,"group":428},{"id":71,"label":72,"slug":73},{"id":66,"label":67,"slug":68,"rank":69,"group":430},{"id":71,"label":72,"slug":73},[432,433,434,435,436],{"id":182,"title":183,"slug":184},{"id":186,"title":187,"slug":188},{"id":84,"title":85,"slug":86},{"id":80,"title":81,"slug":82},{"id":88,"title":89,"slug":90},{"slug":438,"title":439,"logo":440,"baseline":441,"categories":442},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[443,444,445,449],{"id":307,"title":308,"slug":309},{"id":98,"title":99,"slug":100},{"id":446,"title":447,"slug":448},22,"Knowledge Management","knowledge-management",{"id":450,"title":451,"slug":452},46,"Analytics","analytics",{"uuid":454,"title":455,"description":456,"canonical_path":457,"image":458,"width":43,"height":115,"image_alt":459,"published_at":460,"kind":47,"patterns":461,"component_categories":468,"app":470},"3cbb2e73-6f67-4d66-80ec-e00ae16ec64e","Riverside Studio","Settings page where the user views their current free plan status and is prompted to upgrade their subscription.","\u002Fexamples\u002Fapps\u002Friverside\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F3cbb2e73-6f67-4d66-80ec-e00ae16ec64e.png","Riverside Studio from Riverside","2026-08-24T09:31:05.000Z",[462,464,466],{"id":170,"label":171,"slug":172,"rank":53,"group":463},{"id":71,"label":72,"slug":73},{"id":12,"label":13,"slug":59,"rank":60,"group":465},{"id":62,"label":63,"slug":64},{"id":66,"label":67,"slug":68,"rank":69,"group":467},{"id":71,"label":72,"slug":73},[469],{"id":88,"title":89,"slug":90},{"slug":471,"title":472,"logo":473,"baseline":474,"categories":475},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[476],{"id":303,"title":304,"slug":305},{"uuid":478,"title":479,"description":480,"canonical_path":481,"image":482,"width":43,"height":115,"image_alt":483,"published_at":484,"kind":47,"patterns":485,"component_categories":492,"app":497},"dde19e96-9284-49d0-844c-5c6bda5c2406","Settings - Axiom","Settings page where the user views their personal license details, monthly allowances, and usage limits in a modal.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdde19e96-9284-49d0-844c-5c6bda5c2406.png","Settings - Axiom from Axiom","2026-08-18T09:00:19.000Z",[486,488,490],{"id":12,"label":13,"slug":59,"rank":53,"group":487},{"id":62,"label":63,"slug":64},{"id":50,"label":51,"slug":52,"rank":60,"group":489},{"id":55,"label":56,"slug":57},{"id":124,"label":125,"slug":126,"rank":69,"group":491},{"id":55,"label":56,"slug":57},[493,494,495,496],{"id":396,"title":397,"slug":398},{"id":253,"title":254,"slug":255},{"id":80,"title":81,"slug":82},{"id":88,"title":89,"slug":90},{"slug":498,"title":499,"logo":500,"baseline":501,"categories":502},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[503,504,508,509],{"id":450,"title":451,"slug":452},{"id":505,"title":506,"slug":507},57,"Big data","big-data",{"id":342,"title":343,"slug":344},{"id":151,"title":152,"slug":153},[],[512,515,518,520,523,525,527,530,533,536,539,542,545,548,551,554,557,560],{"label":51,"to":513,"count":514},"\u002Fexamples\u002Fscreens\u002Fusage",7,{"label":171,"to":516,"count":517},"\u002Fexamples\u002Fscreens\u002Fpricing",5,{"label":67,"to":519,"count":517},"\u002Fexamples\u002Fscreens\u002Fupgrade-prompt",{"label":125,"to":521,"count":522},"\u002Fexamples\u002Fscreens\u002Ftable",3,{"label":358,"to":524,"count":60},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":245,"to":526,"count":60},"\u002Fexamples\u002Fscreens\u002Fpayment-form",{"label":528,"to":529},"Bud design examples","\u002Fexamples\u002Fapps\u002Fbud",{"label":531,"to":532},"Polar design examples","\u002Fexamples\u002Fapps\u002Fpolar",{"label":534,"to":535},"Magnific design examples","\u002Fexamples\u002Fapps\u002Fmagnific",{"label":537,"to":538},"Latitude.sh design examples","\u002Fexamples\u002Fapps\u002Flatitude-2",{"label":540,"to":541},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":543,"to":544},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":546,"to":547},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":549,"to":550},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":552,"to":553},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":555,"to":556},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":558,"to":559},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":561,"to":562},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"published_at":564,"updated_at":565},"2026-05-13T12:40:03.000Z","2026-09-26T20:10:01.250Z"]