[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Ftags\u002Fusage-based-billing":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":332,"links":333,"dates":369},"\u002Fexamples\u002Ftags\u002Fusage-based-billing","collection","screens",true,{"example_count":9,"app_count":10},12,7,{"id":12,"title":13,"description":14},213607,"Usage-based billing","",{"title":16,"description":17,"og_image":18},"Usage-based billing screen examples - Nicelydone","Usage-based billing screen design examples from SaaS apps. Browse examples from Polar, Twin, Kinsta.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc4db5ea6-4b97-4cb7-bcec-14210b3c036d.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"tags","\u002Fexamples\u002Ftags",{"label":27,"to":4},"Usage-based billing screen examples",{"title":27,"eyebrow":29,"description":17,"sections":30,"body":31},"Tag category",[],[32],"12 screens",[34,85,151,192,217,254,300],{"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},"5a95d749-a7fe-4e3e-920b-3202e2c5b97c","Usage-Based Billing | Polar","Feature page explaining usage-based billing on events, detailing ingestion strategies like LLM, Stream, and S3 for developers.","\u002Fexamples\u002Fapps\u002Fpolar\u002Fmarketing",3024,11634,"Usage-Based Billing | Polar from Polar","2026-09-21T19:01:38.000Z","screen",[45],{"id":46,"label":47,"slug":48,"rank":49,"group":50},138,"Feature Page","feature-page",0,{"id":51,"label":52,"slug":53},15,"Marketing Page Types","marketing-page-types",[55,59],{"id":56,"title":57,"slug":58},258,"Header","header",{"id":60,"title":61,"slug":62},202,"Footer","footer",{"slug":64,"title":65,"logo":66,"baseline":67,"categories":68},"polar","Polar","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpolar-3d0012c1.png","Sell SaaS and digital products in minutes",[69,73,77,81],{"id":70,"title":71,"slug":72},36,"Finance","finance",{"id":74,"title":75,"slug":76},39,"Payments","payments",{"id":78,"title":79,"slug":80},48,"Developer Tools","developer-tools",{"id":82,"title":83,"slug":84},37,"Developer APIs","developer-apis",{"uuid":86,"title":87,"description":88,"canonical_path":89,"image":90,"width":39,"height":91,"image_alt":92,"published_at":93,"kind":43,"patterns":94,"component_categories":124,"app":137},"1d02022e-9ab7-47d7-911f-89f6193ac672","Twin - Automate anything","Billing modal where the user can upgrade to a Plus subscription or make a one-time purchase to top up their task credits.","\u002Fexamples\u002Fapps\u002Ftwin\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1d02022e-9ab7-47d7-911f-89f6193ac672.png",1780,"Twin - Automate anything from Twin","2026-02-09T10:17:21.000Z",[95,103,112,118],{"id":96,"label":97,"slug":98,"rank":49,"group":99},89,"Pricing","pricing",{"id":100,"label":101,"slug":102},9,"Plans & Limits","plans-and-limits",{"id":104,"label":105,"slug":106,"rank":107,"group":108},130,"Checkout","checkout",1,{"id":109,"label":110,"slug":111},14,"Payments & Checkout","payments-and-checkout",{"id":113,"label":114,"slug":115,"rank":116,"group":117},131,"Payment Form","payment-form",2,{"id":109,"label":110,"slug":111},{"id":119,"label":120,"slug":121,"rank":122,"group":123},93,"Usage Limit","usage-limit",3,{"id":100,"label":101,"slug":102},[125,129,133],{"id":126,"title":127,"slug":128},284,"Modal","modal",{"id":130,"title":131,"slug":132},260,"Badge","badge",{"id":134,"title":135,"slug":136},175,"Button","button",{"slug":138,"title":139,"logo":140,"baseline":141,"categories":142},"twin","Twin","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcfafc203-3d6a-4cfc-9ca4-539681caf005.png","The AI company builder",[143,147],{"id":144,"title":145,"slug":146},80,"Artificial Intelligence","artificial-intelligence",{"id":148,"title":149,"slug":150},105,"Workflow Automation","workflow-automation",{"uuid":152,"title":153,"description":154,"canonical_path":155,"image":156,"width":39,"height":157,"image_alt":158,"published_at":159,"kind":43,"patterns":160,"component_categories":166,"app":182},"ff440135-2909-47f9-bef1-defa63f931da","Application Hosting Pricing - Kinsta®","Pricing page where the user compares resource-based costs for application pods, build machines, bandwidth, and persistent storage via detailed tables.","\u002Fexamples\u002Fapps\u002Fkinsta\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fff440135-2909-47f9-bef1-defa63f931da.png",10650,"Application Hosting Pricing - Kinsta® from Kinsta","2025-11-03T21:16:47.000Z",[161],{"id":162,"label":163,"slug":164,"rank":49,"group":165},143,"Pricing Page","pricing-page",{"id":51,"label":52,"slug":53},[167,171,175,176,180,181],{"id":168,"title":169,"slug":170},189,"FAQ","faq",{"id":172,"title":173,"slug":174},174,"Card","card",{"id":56,"title":57,"slug":58},{"id":177,"title":178,"slug":179},233,"Tabs","tabs",{"id":130,"title":131,"slug":132},{"id":60,"title":61,"slug":62},{"slug":183,"title":184,"logo":185,"baseline":186,"categories":187},"kinsta","Kinsta","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1206afb6-473b-4871-9c3a-5ae09d868502.png","Simply better hosting for WordPress",[188,191],{"id":10,"title":189,"slug":190},"Web Development","web-development",{"id":78,"title":79,"slug":80},{"uuid":193,"title":194,"description":195,"canonical_path":196,"image":197,"width":39,"height":198,"image_alt":199,"published_at":200,"kind":43,"patterns":201,"component_categories":204,"app":205},"1f65b927-7450-44ec-ba13-fbe4fb5c038e","Parallel Platform","Settings page detailing usage-based pricing tiers for various API processors including Task, Chat, and Search.","\u002Fexamples\u002Fapps\u002Fparallel\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1f65b927-7450-44ec-ba13-fbe4fb5c038e.png",2472,"Parallel Platform from Parallel","2025-09-29T13:23:07.000Z",[202],{"id":96,"label":97,"slug":98,"rank":49,"group":203},{"id":100,"label":101,"slug":102},[],{"slug":206,"title":207,"logo":208,"baseline":209,"categories":210},"parallel","Parallel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fparallel-45w6usw3.png","The highest accuracy web search for your AI",[211,212,213],{"id":144,"title":145,"slug":146},{"id":82,"title":83,"slug":84},{"id":214,"title":215,"slug":216},55,"Search engine","search-engine",{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":39,"height":223,"image_alt":224,"published_at":225,"kind":43,"patterns":226,"component_categories":241,"app":244},"684087e3-33ad-4119-a0af-6fccf213ccae","Chronicle","AI generation setup screen where the user configures parameters like content type, chapter count, rewrite style, and language before continuing to process the source text.","\u002Fexamples\u002Fapps\u002Fchronicle\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F684087e3-33ad-4119-a0af-6fccf213ccae.png",1714,"Chronicle from Chronicle","2025-06-10T17:21:15.000Z",[227,234],{"id":228,"label":229,"slug":230,"rank":49,"group":231},30,"AI Generation","ai-generation",{"id":122,"label":232,"slug":233},"AI","ai",{"id":235,"label":236,"slug":237,"rank":107,"group":238},11,"Edit","edit",{"id":116,"label":239,"slug":240},"Actions","actions",[242,243],{"id":134,"title":135,"slug":136},{"id":130,"title":131,"slug":132},{"slug":245,"title":219,"logo":246,"baseline":247,"categories":248},"chronicle","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fchronicle-p7klgqh3.png","Stunning presentations, made effortlessly",[249,253],{"id":250,"title":251,"slug":252},85,"Presentation software","presentation-software",{"id":144,"title":145,"slug":146},{"uuid":255,"title":256,"description":257,"canonical_path":258,"image":259,"width":39,"height":260,"image_alt":261,"published_at":262,"kind":43,"patterns":263,"component_categories":276,"app":285},"ab9e7011-840d-48d1-ad1e-ed92472d3a7d","Billing Settings | Macaw","Settings page where the user configures a one-time purchase of extra article credits via a modal over their billing overview.","\u002Fexamples\u002Fapps\u002Fmacaw\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fab9e7011-840d-48d1-ad1e-ed92472d3a7d.png",1778,"Billing Settings | Macaw from Macaw","2025-01-28T12:48:11.000Z",[264,272,274],{"id":265,"label":266,"slug":267,"rank":49,"group":268},96,"Billing Settings","billing-settings",{"id":269,"label":270,"slug":271},10,"Settings & Admin","settings-and-admin",{"id":104,"label":105,"slug":106,"rank":107,"group":273},{"id":109,"label":110,"slug":111},{"id":113,"label":114,"slug":115,"rank":116,"group":275},{"id":109,"label":110,"slug":111},[277,281,282,283,284],{"id":278,"title":279,"slug":280},169,"Avatar","avatar",{"id":172,"title":173,"slug":174},{"id":126,"title":127,"slug":128},{"id":134,"title":135,"slug":136},{"id":177,"title":178,"slug":179},{"slug":286,"title":287,"logo":288,"baseline":289,"categories":290},"macaw","Macaw","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmacaw-l2yg9kds.png","Generate AI content that humans love to read",[291,295,299],{"id":292,"title":293,"slug":294},25,"Marketing","marketing",{"id":296,"title":297,"slug":298},59,"Writing tools","writing-tools",{"id":144,"title":145,"slug":146},{"uuid":301,"title":302,"description":303,"canonical_path":304,"image":305,"width":306,"height":307,"image_alt":308,"published_at":309,"kind":43,"patterns":310,"component_categories":316,"app":324},"63f43a7b-fe78-41a7-a847-f6e53cf445ea","Metronome","Landing page for a usage-based billing infrastructure platform featuring product benefits, a technical deep-dive with tabs, and customer testimonials.","\u002Fexamples\u002Fapps\u002Fmetronome\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F63f43a7b-fe78-41a7-a847-f6e53cf445ea.png",3072,12758,"Metronome from Metronome","2022-02-06T12:45:09.000Z",[311],{"id":312,"label":313,"slug":314,"rank":49,"group":315},136,"Landing Page","landing-page",{"id":51,"label":52,"slug":53},[317,321,322,323],{"id":318,"title":319,"slug":320},232,"Testimonial","testimonial",{"id":56,"title":57,"slug":58},{"id":177,"title":178,"slug":179},{"id":60,"title":61,"slug":62},{"slug":325,"title":302,"logo":326,"baseline":327,"categories":328},"metronome","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmetronome-uckqif25.png","Effortless usage-based billing at scale",[329,330,331],{"id":82,"title":83,"slug":84},{"id":70,"title":71,"slug":72},{"id":74,"title":75,"slug":76},[],[334,336,338,340,342,344,346,348,351,354,357,360,363,366],{"label":105,"to":335,"count":116},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":114,"to":337,"count":116},"\u002Fexamples\u002Fscreens\u002Fpayment-form",{"label":97,"to":339,"count":116},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":229,"to":341,"count":107},"\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":266,"to":343,"count":107},"\u002Fexamples\u002Fscreens\u002Fbilling-settings",{"label":236,"to":345,"count":107},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":120,"to":347,"count":107},"\u002Fexamples\u002Fscreens\u002Fusage-limit",{"label":349,"to":350},"Polar design examples","\u002Fexamples\u002Fapps\u002Fpolar",{"label":352,"to":353},"Twin design examples","\u002Fexamples\u002Fapps\u002Ftwin",{"label":355,"to":356},"Kinsta design examples","\u002Fexamples\u002Fapps\u002Fkinsta",{"label":358,"to":359},"Parallel design examples","\u002Fexamples\u002Fapps\u002Fparallel",{"label":361,"to":362},"Chronicle design examples","\u002Fexamples\u002Fapps\u002Fchronicle",{"label":364,"to":365},"Macaw design examples","\u002Fexamples\u002Fapps\u002Fmacaw",{"label":367,"to":368},"Metronome design examples","\u002Fexamples\u002Fapps\u002Fmetronome",{"published_at":370,"updated_at":42},"2022-02-06T12:43:56.000Z"]