[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Ftags\u002Fbilling-portal":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":459,"links":460,"dates":515},"\u002Fexamples\u002Ftags\u002Fbilling-portal","collection","screens",true,{"example_count":9,"app_count":10},16,11,{"id":12,"title":13,"description":14},216157,"Billing portal","",{"title":16,"description":17,"og_image":18},"Billing portal screen examples - Nicelydone","Billing portal screen design examples from SaaS apps. Browse examples from Origin Financial, Ona, Cobot.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5d9754f9-1ffb-468a-a33d-698077089497.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"tags","\u002Fexamples\u002Ftags",{"label":27,"to":4},"Billing portal screen examples",{"title":27,"eyebrow":29,"description":17,"sections":30,"body":31},"Tag category",[],[32],"16 screens",[34,99,128,161,223,261,311,359,392,426],{"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":72,"app":81},"5d9754f9-1ffb-468a-a33d-698077089497","Cancel subscription | Origin Financial Billing","Billing settings screen where the user confirms the cancellation of their $99.00 per year Origin subscription.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fscreens",3024,1758,"Cancel subscription | Origin Financial Billing from Origin Financial","2026-08-31T10:47:43.000Z","screen",[45,54,63],{"id":46,"label":47,"slug":48,"rank":49,"group":50},114,"Confirmation","confirmation",0,{"id":51,"label":52,"slug":53},12,"States & Feedback","states-and-feedback",{"id":55,"label":56,"slug":57,"rank":58,"group":59},96,"Billing Settings","billing-settings",1,{"id":60,"label":61,"slug":62},10,"Settings & Admin","settings-and-admin",{"id":64,"label":65,"slug":66,"rank":67,"group":68},93,"Usage Limit","usage-limit",2,{"id":69,"label":70,"slug":71},9,"Plans & Limits","plans-and-limits",[73,77],{"id":74,"title":75,"slug":76},177,"Breadcrumb","breadcrumb",{"id":78,"title":79,"slug":80},175,"Button","button",{"slug":82,"title":83,"logo":84,"baseline":85,"categories":86},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[87,91,95],{"id":88,"title":89,"slug":90},36,"Finance","finance",{"id":92,"title":93,"slug":94},56,"Accounting","accounting",{"id":96,"title":97,"slug":98},80,"Artificial Intelligence","artificial-intelligence",{"uuid":100,"title":101,"description":102,"canonical_path":103,"image":104,"width":39,"height":105,"image_alt":106,"published_at":107,"kind":43,"patterns":108,"component_categories":111,"app":117},"c4b8042d-7cce-4c9e-848f-042ad18d8b3d","Billing | Ona","Settings page where the user manages their free subscription plan, tracks compute unit usage via a progress bar, and accesses the external billing portal.","\u002Fexamples\u002Fapps\u002Fona\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc4b8042d-7cce-4c9e-848f-042ad18d8b3d.png",1780,"Billing | Ona from Ona","2026-01-26T11:04:38.000Z",[109],{"id":55,"label":56,"slug":57,"rank":49,"group":110},{"id":60,"label":61,"slug":62},[112,116],{"id":113,"title":114,"slug":115},174,"Card","card",{"id":78,"title":79,"slug":80},{"slug":118,"title":119,"logo":120,"baseline":121,"categories":122},"ona","Ona","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5f04e4d2-1820-448d-8510-4d55ff185524.png","The AI software engineer you can rely on",[123,127],{"id":124,"title":125,"slug":126},48,"Developer Tools","developer-tools",{"id":96,"title":97,"slug":98},{"uuid":129,"title":130,"description":131,"canonical_path":132,"image":133,"width":39,"height":105,"image_alt":134,"published_at":135,"kind":43,"patterns":136,"component_categories":144,"app":150},"8068e329-d50c-40e7-98a7-82bcfa987fe0","Mainframe Billing","Loading screen for a Stripe billing portal where the user waits to manage their subscription.","\u002Fexamples\u002Fapps\u002Fcobot\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8068e329-d50c-40e7-98a7-82bcfa987fe0.png","Mainframe Billing from Cobot","2025-09-15T14:01:17.000Z",[137,142],{"id":138,"label":139,"slug":140,"rank":49,"group":141},120,"Loading","loading",{"id":51,"label":52,"slug":53},{"id":55,"label":56,"slug":57,"rank":58,"group":143},{"id":60,"label":61,"slug":62},[145,149],{"id":146,"title":147,"slug":148},240,"Horizontal navigation","horizontal-navigation",{"id":78,"title":79,"slug":80},{"slug":151,"title":152,"logo":153,"baseline":154,"categories":155},"cobot","Cobot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcobot-cfgifddahsrq.png","The first to-do app that does it for you",[156,157],{"id":96,"title":97,"slug":98},{"id":158,"title":159,"slug":160},30,"Productivity","productivity",{"uuid":162,"title":163,"description":164,"canonical_path":165,"image":166,"width":39,"height":105,"image_alt":167,"published_at":168,"kind":43,"patterns":169,"component_categories":182,"app":199},"9cabf241-6e6e-430b-9d85-dff8ee7c7f8d","View Invoice","Invoice detail page with a modal open to send the invoice via email to specified contacts.","\u002Fexamples\u002Fapps\u002Foutseta\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9cabf241-6e6e-430b-9d85-dff8ee7c7f8d.png","View Invoice from Outseta","2025-09-01T19:09:29.000Z",[170,172,174],{"id":55,"label":56,"slug":57,"rank":49,"group":171},{"id":60,"label":61,"slug":62},{"id":46,"label":47,"slug":48,"rank":58,"group":173},{"id":51,"label":52,"slug":53},{"id":175,"label":176,"slug":177,"rank":67,"group":178},47,"Table","table",{"id":179,"label":180,"slug":181},4,"Data & Analysis","data-and-analysis",[183,187,188,189,193,197,198],{"id":184,"title":185,"slug":186},284,"Modal","modal",{"id":74,"title":75,"slug":76},{"id":146,"title":147,"slug":148},{"id":190,"title":191,"slug":192},169,"Avatar","avatar",{"id":194,"title":195,"slug":196},260,"Badge","badge",{"id":113,"title":114,"slug":115},{"id":78,"title":79,"slug":80},{"slug":200,"title":201,"logo":202,"baseline":203,"categories":204},"outseta","Outseta","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F936c2a3c-b3fd-40ad-a0f0-efcb89fadd6c.png","The membership operating system",[205,208,212,216,220],{"id":58,"title":206,"slug":207},"Communities","communities",{"id":209,"title":210,"slug":211},92,"Email","email",{"id":213,"title":214,"slug":215},53,"CRM","crm",{"id":217,"title":218,"slug":219},39,"Payments","payments",{"id":175,"title":221,"slug":222},"Customer Service","customer-service",{"uuid":224,"title":225,"description":226,"canonical_path":227,"image":228,"width":39,"height":105,"image_alt":229,"published_at":230,"kind":43,"patterns":231,"component_categories":247,"app":250},"efbd7423-bfc5-4280-afcb-7d7374b2aa86","Twenty.com Billing","Billing settings page where the user can view their active trial status, add a payment method, update their email, and review invoice history.","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fefbd7423-bfc5-4280-afcb-7d7374b2aa86.png","Twenty.com Billing from Twenty","2025-07-07T13:08:30.000Z",[232,234,239],{"id":55,"label":56,"slug":57,"rank":49,"group":233},{"id":60,"label":61,"slug":62},{"id":235,"label":236,"slug":237,"rank":58,"group":238},91,"Trial","trial",{"id":69,"label":70,"slug":71},{"id":240,"label":241,"slug":242,"rank":67,"group":243},132,"Payment Method","payment-method",{"id":244,"label":245,"slug":246},14,"Payments & Checkout","payments-and-checkout",[248,249],{"id":194,"title":195,"slug":196},{"id":78,"title":79,"slug":80},{"slug":251,"title":252,"logo":253,"baseline":254,"categories":255},"twenty","Twenty","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F958b58b6-f349-407c-8a71-bb683f68bcd2.png","The #1 Open-Source CRM",[256,257],{"id":213,"title":214,"slug":215},{"id":258,"title":259,"slug":260},45,"Open Source","open-source",{"uuid":262,"title":263,"description":264,"canonical_path":265,"image":266,"width":39,"height":105,"image_alt":267,"published_at":268,"kind":43,"patterns":269,"component_categories":288,"app":292},"35aa6000-fd18-4e0d-ad77-a2193ef072e3","Account","Settings page where the user views their active Basic Plan usage, features, and billing details, with options to change or cancel the plan.","\u002Fexamples\u002Fapps\u002Fmidjourney\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F35aa6000-fd18-4e0d-ad77-a2193ef072e3.png","Account from Midjourney","2025-06-03T09:34:10.000Z",[270,272,277,282],{"id":55,"label":56,"slug":57,"rank":49,"group":271},{"id":60,"label":61,"slug":62},{"id":273,"label":274,"slug":275,"rank":58,"group":276},89,"Pricing","pricing",{"id":69,"label":70,"slug":71},{"id":278,"label":279,"slug":280,"rank":67,"group":281},94,"Account Settings","account-settings",{"id":60,"label":61,"slug":62},{"id":283,"label":284,"slug":285,"rank":286,"group":287},49,"Usage","usage",3,{"id":179,"label":180,"slug":181},[289,290,291],{"id":194,"title":195,"slug":196},{"id":113,"title":114,"slug":115},{"id":78,"title":79,"slug":80},{"slug":293,"title":294,"logo":295,"baseline":296,"categories":297},"midjourney","Midjourney","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmidjourney-2b6oxos6.png","Exploring new mediums of thought and amplifying the imaginative powers of the human species",[298,299,303,307],{"id":96,"title":97,"slug":98},{"id":300,"title":301,"slug":302},8,"Design","design",{"id":304,"title":305,"slug":306},38,"Art","art",{"id":308,"title":309,"slug":310},100,"Video","video",{"uuid":312,"title":313,"description":314,"canonical_path":315,"image":316,"width":39,"height":317,"image_alt":318,"published_at":319,"kind":43,"patterns":320,"component_categories":342,"app":347},"31e85719-91ca-477e-ba97-1493cf69f2b2","Polar","List view where the user manages their active and cancelled subscriptions, currently filtered by a search query.","\u002Fexamples\u002Fapps\u002Fpolar\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F31e85719-91ca-477e-ba97-1493cf69f2b2.png",3016,"Polar from Polar","2024-11-18T10:29:19.000Z",[321,328,335,340],{"id":322,"label":323,"slug":324,"rank":49,"group":325},79,"Browse","browse",{"id":300,"label":326,"slug":327},"Pages & Content","pages-and-content",{"id":329,"label":330,"slug":331,"rank":58,"group":332},13,"Filter & Sort","filter-and-sort",{"id":67,"label":333,"slug":334},"Actions","actions",{"id":336,"label":337,"slug":338,"rank":67,"group":339},22,"Search","search",{"id":67,"label":333,"slug":334},{"id":55,"label":56,"slug":57,"rank":286,"group":341},{"id":60,"label":61,"slug":62},[343,344,345,346],{"id":146,"title":147,"slug":148},{"id":190,"title":191,"slug":192},{"id":113,"title":114,"slug":115},{"id":78,"title":79,"slug":80},{"slug":348,"title":313,"logo":349,"baseline":350,"categories":351},"polar","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpolar-3d0012c1.png","Sell SaaS and digital products in minutes",[352,353,354,355],{"id":88,"title":89,"slug":90},{"id":217,"title":218,"slug":219},{"id":124,"title":125,"slug":126},{"id":356,"title":357,"slug":358},37,"Developer APIs","developer-apis",{"uuid":360,"title":361,"description":362,"canonical_path":363,"image":364,"width":39,"height":365,"image_alt":366,"published_at":367,"kind":43,"patterns":368,"component_categories":373,"app":380},"89da4129-311a-4991-ae87-1c60320ad7e0","Superhuman | Admin","Settings page where the user views their active subscription details, seat pricing breakdown, and recent receipts.","\u002Fexamples\u002Fapps\u002Fsuperhuman\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F89da4129-311a-4991-ae87-1c60320ad7e0.png",2388,"Superhuman | Admin from Superhuman","2023-12-12T11:31:03.000Z",[369,371],{"id":55,"label":56,"slug":57,"rank":49,"group":370},{"id":60,"label":61,"slug":62},{"id":278,"label":279,"slug":280,"rank":58,"group":372},{"id":60,"label":61,"slug":62},[374,378,379],{"id":375,"title":376,"slug":377},233,"Tabs","tabs",{"id":113,"title":114,"slug":115},{"id":78,"title":79,"slug":80},{"slug":381,"title":382,"logo":383,"baseline":384,"categories":385},"superhuman","Superhuman","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsuperhuman-3d38669b.png","The fastest email experience ever made",[386,387,388],{"id":158,"title":159,"slug":160},{"id":209,"title":210,"slug":211},{"id":389,"title":390,"slug":391},101,"Calendar","calendar",{"uuid":393,"title":394,"description":395,"canonical_path":396,"image":397,"width":398,"height":399,"image_alt":400,"published_at":401,"kind":43,"patterns":402,"component_categories":411,"app":415},"39a6b95e-5fff-4664-8d9e-20d648052b5b","License Admin · Sketch","License management page where the user can view their license key, renew their subscription, and unlink active devices from a data table.","\u002Fexamples\u002Fapps\u002Fsketch\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fsketch_billing_7d0bd264_nicelydone.png",3072,3802,"License Admin · Sketch from Sketch","2021-08-22T14:11:43.000Z",[403],{"id":404,"label":405,"slug":406,"rank":49,"group":407},176,"Docs Hub","docs-hub",{"id":408,"label":409,"slug":410},15,"Marketing Page Types","marketing-page-types",[412,413,414],{"id":194,"title":195,"slug":196},{"id":113,"title":114,"slug":115},{"id":78,"title":79,"slug":80},{"slug":416,"title":417,"logo":418,"baseline":419,"categories":420},"sketch","Sketch","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsketch-42f889d5.png","The digital design toolkit",[421,422],{"id":300,"title":301,"slug":302},{"id":423,"title":424,"slug":425},23,"Collaboration","collaboration",{"uuid":427,"title":428,"description":429,"canonical_path":430,"image":431,"width":398,"height":432,"image_alt":433,"published_at":434,"kind":43,"patterns":435,"component_categories":441,"app":450},"9713fac0-1cf7-4a9c-8acb-b265e7371fc3","Invoices – nicelydone.club – Stripe","Detail page where the user views the summary, connections, details, and event logs for a specific customer invoice.","\u002Fexamples\u002Fapps\u002Fstripe\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fstripe_detail-page-single-page_0430606f_nicelydone.png",4728,"Invoices – nicelydone.club – Stripe from Stripe","2021-08-15T10:10:52.000Z",[436],{"id":437,"label":438,"slug":439,"rank":49,"group":440},154,"Event Page","event-page",{"id":408,"label":409,"slug":410},[442,446,447,448,449],{"id":443,"title":444,"slug":445},167,"Alert","alert",{"id":375,"title":376,"slug":377},{"id":190,"title":191,"slug":192},{"id":194,"title":195,"slug":196},{"id":78,"title":79,"slug":80},{"slug":451,"title":452,"logo":453,"baseline":454,"categories":455},"stripe","Stripe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","Payments infrastructure for the internet",[456,457,458],{"id":88,"title":89,"slug":90},{"id":356,"title":357,"slug":358},{"id":217,"title":218,"slug":219},[],[461,463,465,467,469,471,473,475,477,479,481,483,485,488,491,494,497,500,503,506,509,512],{"label":56,"to":462,"count":300},"\u002Fexamples\u002Fscreens\u002Fbilling-settings",{"label":279,"to":464,"count":67},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":47,"to":466,"count":67},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":323,"to":468,"count":58},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":330,"to":470,"count":58},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":139,"to":472,"count":58},"\u002Fexamples\u002Fscreens\u002Floading",{"label":241,"to":474,"count":58},"\u002Fexamples\u002Fscreens\u002Fpayment-method",{"label":274,"to":476,"count":58},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":337,"to":478,"count":58},"\u002Fexamples\u002Fscreens\u002Fsearch",{"label":176,"to":480,"count":58},"\u002Fexamples\u002Fscreens\u002Ftable",{"label":236,"to":482,"count":58},"\u002Fexamples\u002Fscreens\u002Ftrial",{"label":284,"to":484,"count":58},"\u002Fexamples\u002Fscreens\u002Fusage",{"label":486,"to":487},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":489,"to":490},"Ona design examples","\u002Fexamples\u002Fapps\u002Fona",{"label":492,"to":493},"Cobot design examples","\u002Fexamples\u002Fapps\u002Fcobot",{"label":495,"to":496},"Outseta design examples","\u002Fexamples\u002Fapps\u002Foutseta",{"label":498,"to":499},"Twenty design examples","\u002Fexamples\u002Fapps\u002Ftwenty",{"label":501,"to":502},"Midjourney design examples","\u002Fexamples\u002Fapps\u002Fmidjourney",{"label":504,"to":505},"Polar design examples","\u002Fexamples\u002Fapps\u002Fpolar",{"label":507,"to":508},"Superhuman design examples","\u002Fexamples\u002Fapps\u002Fsuperhuman",{"label":510,"to":511},"Sketch design examples","\u002Fexamples\u002Fapps\u002Fsketch",{"label":513,"to":514},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"published_at":516,"updated_at":517},"2021-08-15T08:52:16.000Z","2026-09-05T20:19:52.460Z"]