[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Ftags\u002Fmodal-finance":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":511,"links":512,"dates":573},"\u002Fexamples\u002Ftags\u002Fmodal-finance","collection","screens",true,{"example_count":9,"app_count":10},1101,26,{"id":12,"title":13,"description":14},207660,"Modal finance","",{"title":16,"description":17,"og_image":18},"Modal finance screen examples - Nicelydone","Modal finance screen design examples from SaaS apps. Browse examples from Monarch, Secfi, Increase.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F229f18cc-1a67-4650-8530-00cd772600bd.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"tags","\u002Fexamples\u002Ftags",{"label":27,"to":4},"Modal finance screen examples",{"title":27,"eyebrow":29,"description":17,"sections":30,"body":31},"Tag category",[],[32],"1101 screens",[34,92,147,199,239,285,318,345,383,412,446,482],{"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":69,"app":82},"229f18cc-1a67-4650-8530-00cd772600bd","Monarch | Dashboard","Dashboard where the user has opened the global search command palette over their financial overview widgets.","\u002Fexamples\u002Fapps\u002Fmonarch\u002Fscreens",3024,1778,"Monarch | Dashboard from Monarch","2025-03-17T14:09:52.000Z","screen",[45,54,60],{"id":46,"label":47,"slug":48,"rank":49,"group":50},41,"Dashboard","dashboard",0,{"id":51,"label":52,"slug":53},4,"Data & Analysis","data-and-analysis",{"id":55,"label":56,"slug":57,"rank":58,"group":59},46,"Stats","stats",1,{"id":51,"label":52,"slug":53},{"id":61,"label":62,"slug":63,"rank":64,"group":65},79,"Browse","browse",2,{"id":66,"label":67,"slug":68},8,"Pages & Content","pages-and-content",[70,74,78],{"id":71,"title":72,"slug":73},174,"Card","card",{"id":75,"title":76,"slug":77},260,"Badge","badge",{"id":79,"title":80,"slug":81},175,"Button","button",{"slug":83,"title":84,"logo":85,"baseline":86,"categories":87},"monarch","Monarch","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmonarch-58e7e32a.png","The modern way to manage money",[88],{"id":89,"title":90,"slug":91},36,"Finance","finance",{"uuid":93,"title":94,"description":95,"canonical_path":96,"image":97,"width":39,"height":40,"image_alt":98,"published_at":99,"kind":43,"patterns":100,"component_categories":130,"app":140},"4fe4f8e6-89f0-4656-9c7d-d06168884f58","Settings | Secfi","Settings page where the user must enter an email confirmation code to verify their identity before permanently deleting their account.","\u002Fexamples\u002Fapps\u002Fsecfi\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4fe4f8e6-89f0-4656-9c7d-d06168884f58.png","Settings | Secfi from Secfi","2025-02-03T13:08:50.000Z",[101,109,117,122],{"id":102,"label":103,"slug":104,"rank":49,"group":105},94,"Account Settings","account-settings",{"id":106,"label":107,"slug":108},10,"Settings & Admin","settings-and-admin",{"id":110,"label":111,"slug":112,"rank":58,"group":113},114,"Confirmation","confirmation",{"id":114,"label":115,"slug":116},12,"States & Feedback","states-and-feedback",{"id":118,"label":119,"slug":120,"rank":64,"group":121},101,"Security Settings","security-settings",{"id":106,"label":107,"slug":108},{"id":123,"label":124,"slug":125,"rank":126,"group":127},9,"Delete","delete",3,{"id":64,"label":128,"slug":129},"Actions","actions",[131,135,139],{"id":132,"title":133,"slug":134},240,"Horizontal navigation","horizontal-navigation",{"id":136,"title":137,"slug":138},284,"Modal","modal",{"id":79,"title":80,"slug":81},{"slug":141,"title":142,"logo":143,"baseline":144,"categories":145},"secfi","Secfi","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsecfi-680f7b1f.png","The leading financial advisor for tech people",[146],{"id":89,"title":90,"slug":91},{"uuid":148,"title":149,"description":150,"canonical_path":151,"image":152,"width":39,"height":153,"image_alt":154,"published_at":155,"kind":43,"patterns":156,"component_categories":174,"app":181},"7f5ef4f4-de1d-4a7e-b727-7e0cfae90ec8","Increase","Dashboard showing total account balance, a balance history chart over time, and a list of recent events, with a command palette open for global search.","\u002Fexamples\u002Fapps\u002Fincrease\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7f5ef4f4-de1d-4a7e-b727-7e0cfae90ec8.png",1952,"Increase from Increase","2024-12-09T14:19:27.000Z",[157,159,167,169],{"id":46,"label":47,"slug":48,"rank":49,"group":158},{"id":51,"label":52,"slug":53},{"id":160,"label":161,"slug":162,"rank":58,"group":163},63,"Command Palette","command-palette",{"id":164,"label":165,"slug":166},6,"Navigation & Commands","navigation-and-commands",{"id":55,"label":56,"slug":57,"rank":64,"group":168},{"id":51,"label":52,"slug":53},{"id":170,"label":171,"slug":172,"rank":126,"group":173},40,"Charts","charts",{"id":51,"label":52,"slug":53},[175,179,180],{"id":176,"title":177,"slug":178},177,"Breadcrumb","breadcrumb",{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"slug":182,"title":149,"logo":183,"baseline":184,"categories":185},"increase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fincrease-284a5bb9.png","Bare-metal banking APIs",[186,187,191,195],{"id":89,"title":90,"slug":91},{"id":188,"title":189,"slug":190},48,"Developer Tools","developer-tools",{"id":192,"title":193,"slug":194},37,"Developer APIs","developer-apis",{"id":196,"title":197,"slug":198},39,"Payments","payments",{"uuid":200,"title":201,"description":202,"canonical_path":203,"image":204,"width":39,"height":40,"image_alt":205,"published_at":206,"kind":43,"patterns":207,"component_categories":216,"app":223},"a2746b01-08b9-4e8b-85f6-12d85743cde1","Free Invoice Generator - Make an Invoice for Free","Marketing tool showing a success modal with a preview of the generated invoice after the user requested it via email.","\u002Fexamples\u002Fapps\u002Framp\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa2746b01-08b9-4e8b-85f6-12d85743cde1.png","Free Invoice Generator - Make an Invoice for Free from Ramp","2024-11-25T17:00:10.000Z",[208],{"id":209,"label":210,"slug":211,"rank":49,"group":212},156,"Free Tool","free-tool",{"id":213,"label":214,"slug":215},15,"Marketing Page Types","marketing-page-types",[217,221,222],{"id":218,"title":219,"slug":220},258,"Header","header",{"id":136,"title":137,"slug":138},{"id":79,"title":80,"slug":81},{"slug":224,"title":225,"logo":226,"baseline":227,"categories":228},"ramp","Ramp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Framp-b0d4616e.png","The corporate card built for savings",[229,230,231,235],{"id":89,"title":90,"slug":91},{"id":196,"title":197,"slug":198},{"id":232,"title":233,"slug":234},56,"Accounting","accounting",{"id":236,"title":237,"slug":238},80,"Artificial Intelligence","artificial-intelligence",{"uuid":240,"title":241,"description":242,"canonical_path":243,"image":244,"width":39,"height":40,"image_alt":245,"published_at":246,"kind":43,"patterns":247,"component_categories":268,"app":276},"0de4d926-2b01-445a-919e-29e7cc5c0d3d","Polar","Detail page for a purchased course with a side drawer open to change the subscription plan between available tiers.","\u002Fexamples\u002Fapps\u002Fpolar\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0de4d926-2b01-445a-919e-29e7cc5c0d3d.png","Polar from Polar","2024-11-18T10:29:19.000Z",[248,255,263],{"id":249,"label":250,"slug":251,"rank":49,"group":252},89,"Pricing","pricing",{"id":123,"label":253,"slug":254},"Plans & Limits","plans-and-limits",{"id":256,"label":257,"slug":258,"rank":58,"group":259},130,"Checkout","checkout",{"id":260,"label":261,"slug":262},14,"Payments & Checkout","payments-and-checkout",{"id":264,"label":265,"slug":266,"rank":64,"group":267},131,"Payment Form","payment-form",{"id":260,"label":261,"slug":262},[269,270,274,275],{"id":71,"title":72,"slug":73},{"id":271,"title":272,"slug":273},169,"Avatar","avatar",{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"slug":277,"title":241,"logo":278,"baseline":279,"categories":280},"polar","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpolar-3d0012c1.png","Sell SaaS and digital products in minutes",[281,282,283,284],{"id":89,"title":90,"slug":91},{"id":196,"title":197,"slug":198},{"id":188,"title":189,"slug":190},{"id":192,"title":193,"slug":194},{"uuid":286,"title":287,"description":288,"canonical_path":289,"image":290,"width":39,"height":40,"image_alt":291,"published_at":292,"kind":43,"patterns":293,"component_categories":301,"app":310},"9b8a91ab-7857-40b4-95de-41d4d7e65c19","Expensify - Home","Home dashboard with a modal overlay where the user chooses between messaging a concierge or visiting the self-service help site.","\u002Fexamples\u002Fapps\u002Fexpensify\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9b8a91ab-7857-40b4-95de-41d4d7e65c19.png","Expensify - Home from Expensify","2024-10-08T09:42:19.000Z",[294,299],{"id":295,"label":296,"slug":297,"rank":49,"group":298},118,"Help","help",{"id":114,"label":115,"slug":116},{"id":110,"label":111,"slug":112,"rank":58,"group":300},{"id":114,"label":115,"slug":116},[302,306,307,308,309],{"id":303,"title":304,"slug":305},168,"Accordion","accordion",{"id":271,"title":272,"slug":273},{"id":71,"title":72,"slug":73},{"id":75,"title":76,"slug":77},{"id":136,"title":137,"slug":138},{"slug":311,"title":312,"logo":313,"baseline":314,"categories":315},"expensify","Expensify","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fexpensify-186d76c0.png","The expense management app that does it all",[316,317],{"id":89,"title":90,"slug":91},{"id":232,"title":233,"slug":234},{"uuid":319,"title":320,"description":321,"canonical_path":322,"image":323,"width":39,"height":324,"image_alt":325,"published_at":326,"kind":43,"patterns":327,"component_categories":332,"app":336},"c3789602-602d-47b1-b71d-21ad7b561892","The Balance object | Stripe API Reference","API reference documentation for the Balance object where the user has opened the command palette to quickly navigate or search.","\u002Fexamples\u002Fapps\u002Fstripe\u002Fmarketing","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc3789602-602d-47b1-b71d-21ad7b561892.png",1722,"The Balance object | Stripe API Reference from Stripe","2024-06-11T07:27:39.000Z",[328],{"id":176,"label":329,"slug":330,"rank":49,"group":331},"Developer Portal","developer-portal",{"id":213,"label":214,"slug":215},[333,334,335],{"id":303,"title":304,"slug":305},{"id":75,"title":76,"slug":77},{"id":79,"title":80,"slug":81},{"slug":337,"title":338,"logo":339,"baseline":340,"categories":341},"stripe","Stripe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","Payments infrastructure for the internet",[342,343,344],{"id":89,"title":90,"slug":91},{"id":192,"title":193,"slug":194},{"id":196,"title":197,"slug":198},{"uuid":346,"title":347,"description":348,"canonical_path":349,"image":350,"width":39,"height":351,"image_alt":352,"published_at":353,"kind":43,"patterns":354,"component_categories":367,"app":376},"f082fb30-ddcf-47ff-84bb-8dd9fde89357","Compound","Settings page where the user adds a new account member by filling out their personal details like name, contact info, and relationship in a modal overlay.","\u002Fexamples\u002Fapps\u002Fcompound-planning\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff082fb30-ddcf-47ff-84bb-8dd9fde89357.png",1718,"Compound from Compound Planning","2023-11-06T15:30:02.000Z",[355,357,362],{"id":102,"label":103,"slug":104,"rank":49,"group":356},{"id":106,"label":107,"slug":108},{"id":358,"label":359,"slug":360,"rank":58,"group":361},104,"Team Management","team-management",{"id":106,"label":107,"slug":108},{"id":363,"label":364,"slug":365,"rank":64,"group":366},11,"Edit","edit",{"id":64,"label":128,"slug":129},[368,372,373,374,375],{"id":369,"title":370,"slug":371},233,"Tabs","tabs",{"id":132,"title":133,"slug":134},{"id":271,"title":272,"slug":273},{"id":136,"title":137,"slug":138},{"id":79,"title":80,"slug":81},{"slug":377,"title":378,"logo":379,"baseline":380,"categories":381},"compound-planning","Compound Planning","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcompound-m0jdGUb.png","Modern wealth and investment management",[382],{"id":89,"title":90,"slug":91},{"uuid":384,"title":385,"description":386,"canonical_path":387,"image":388,"width":39,"height":389,"image_alt":390,"published_at":391,"kind":43,"patterns":392,"component_categories":402,"app":406},"5e16d600-c987-499d-ba82-008817a64285","Fey","Dashboard where the user monitors daily market performance, sector trends, and a personal stock watchlist in a side drawer.","\u002Fexamples\u002Fapps\u002Ffey\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5e16d600-c987-499d-ba82-008817a64285.png",1674,"Fey from Fey","2023-09-10T19:10:52.000Z",[393,395,400],{"id":46,"label":47,"slug":48,"rank":49,"group":394},{"id":51,"label":52,"slug":53},{"id":396,"label":397,"slug":398,"rank":58,"group":399},47,"Table","table",{"id":51,"label":52,"slug":53},{"id":170,"label":171,"slug":172,"rank":64,"group":401},{"id":51,"label":52,"slug":53},[403,404,405],{"id":71,"title":72,"slug":73},{"id":271,"title":272,"slug":273},{"id":75,"title":76,"slug":77},{"slug":407,"title":385,"logo":408,"baseline":409,"categories":410},"fey","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffey-706d1395.png","Strategic, secure investing for everyday traders",[411],{"id":89,"title":90,"slug":91},{"uuid":413,"title":414,"description":415,"canonical_path":416,"image":417,"width":39,"height":389,"image_alt":418,"published_at":419,"kind":43,"patterns":420,"component_categories":430,"app":434},"dcd23b00-1c8b-42ae-bd18-5c8c50c2a053","Copperx","Checkout page where the user selects a crypto wallet like MetaMask or Rainbow to pay 0.1 USDC for a T-Shirt.","\u002Fexamples\u002Fapps\u002Fcopper\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdcd23b00-1c8b-42ae-bd18-5c8c50c2a053.png","Copperx from Copperx","2023-09-04T06:50:55.000Z",[421,423,425],{"id":256,"label":257,"slug":258,"rank":49,"group":422},{"id":260,"label":261,"slug":262},{"id":264,"label":265,"slug":266,"rank":58,"group":424},{"id":260,"label":261,"slug":262},{"id":426,"label":427,"slug":428,"rank":64,"group":429},25,"Upload & Download","upload-and-download",{"id":64,"label":128,"slug":129},[431,432,433],{"id":71,"title":72,"slug":73},{"id":136,"title":137,"slug":138},{"id":79,"title":80,"slug":81},{"slug":435,"title":414,"logo":436,"baseline":437,"categories":438},"copper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcopper-ckyjtnrs.png","Simplified payments for web3 companies",[439,440,444,445],{"id":89,"title":90,"slug":91},{"id":441,"title":442,"slug":443},95,"Blockchain","blockchain",{"id":192,"title":193,"slug":194},{"id":196,"title":197,"slug":198},{"uuid":447,"title":448,"description":449,"canonical_path":450,"image":451,"width":39,"height":389,"image_alt":452,"published_at":453,"kind":43,"patterns":454,"component_categories":467,"app":472},"eb92d492-f5c7-4400-960a-fcfc5702983b","Syndicate Settings | AngelList","Settings page where the user adds a new team member by entering their name, email, and selecting access permissions via a modal.","\u002Fexamples\u002Fapps\u002Fangellist\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Feb92d492-f5c7-4400-960a-fcfc5702983b.png","Syndicate Settings | AngelList from Angellist","2023-07-10T14:53:04.000Z",[455,460,465],{"id":456,"label":457,"slug":458,"rank":49,"group":459},133,"Invite Teammates","invite-teammates",{"id":64,"label":128,"slug":129},{"id":461,"label":462,"slug":463,"rank":58,"group":464},100,"Roles & Permissions","roles-and-permissions",{"id":106,"label":107,"slug":108},{"id":358,"label":359,"slug":360,"rank":64,"group":466},{"id":106,"label":107,"slug":108},[468,469,470,471],{"id":132,"title":133,"slug":134},{"id":271,"title":272,"slug":273},{"id":136,"title":137,"slug":138},{"id":79,"title":80,"slug":81},{"slug":473,"title":474,"logo":475,"baseline":476,"categories":477},"angellist","Angellist","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fangellist-c5f0f682.png","Build, Lead, Invest",[478,479],{"id":89,"title":90,"slug":91},{"id":160,"title":480,"slug":481},"Startups","startups",{"uuid":483,"title":484,"description":485,"canonical_path":486,"image":487,"width":39,"height":389,"image_alt":488,"published_at":489,"kind":43,"patterns":490,"component_categories":500,"app":504},"daac6d29-8add-4e49-aba1-428e8811d86f","Account","Settings page where the user must verify their email and password in a modal to disable two-factor authentication.","\u002Fexamples\u002Fapps\u002Fpipe\u002Fscreens","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdaac6d29-8add-4e49-aba1-428e8811d86f.png","Account from Pipe","2023-07-04T13:04:49.000Z",[491,493,498],{"id":102,"label":103,"slug":104,"rank":49,"group":492},{"id":106,"label":107,"slug":108},{"id":494,"label":495,"slug":496,"rank":58,"group":497},98,"MFA","mfa",{"id":106,"label":107,"slug":108},{"id":110,"label":111,"slug":112,"rank":64,"group":499},{"id":114,"label":115,"slug":116},[501,502,503],{"id":176,"title":177,"slug":178},{"id":136,"title":137,"slug":138},{"id":79,"title":80,"slug":81},{"slug":505,"title":506,"logo":507,"baseline":508,"categories":509},"pipe","Pipe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpipe-ecd4e6cg.png","The modern capital platform",[510],{"id":89,"title":90,"slug":91},[],[513,515,517,519,521,523,525,527,529,531,533,535,537,540,543,546,549,552,555,558,561,564,567,570],{"label":103,"to":514,"count":126},"\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":111,"to":516,"count":126},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":47,"to":518,"count":126},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":171,"to":520,"count":64},"\u002Fexamples\u002Fscreens\u002Fcharts",{"label":257,"to":522,"count":64},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":265,"to":524,"count":64},"\u002Fexamples\u002Fscreens\u002Fpayment-form",{"label":56,"to":526,"count":64},"\u002Fexamples\u002Fscreens\u002Fstats",{"label":359,"to":528,"count":64},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":62,"to":530,"count":58},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":161,"to":532,"count":58},"\u002Fexamples\u002Fscreens\u002Fcommand-palette",{"label":124,"to":534,"count":58},"\u002Fexamples\u002Fscreens\u002Fdelete",{"label":364,"to":536,"count":58},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":538,"to":539},"Monarch design examples","\u002Fexamples\u002Fapps\u002Fmonarch",{"label":541,"to":542},"Secfi design examples","\u002Fexamples\u002Fapps\u002Fsecfi",{"label":544,"to":545},"Increase design examples","\u002Fexamples\u002Fapps\u002Fincrease",{"label":547,"to":548},"Ramp design examples","\u002Fexamples\u002Fapps\u002Framp",{"label":550,"to":551},"Polar design examples","\u002Fexamples\u002Fapps\u002Fpolar",{"label":553,"to":554},"Expensify design examples","\u002Fexamples\u002Fapps\u002Fexpensify",{"label":556,"to":557},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"label":559,"to":560},"Compound Planning design examples","\u002Fexamples\u002Fapps\u002Fcompound-planning",{"label":562,"to":563},"Fey design examples","\u002Fexamples\u002Fapps\u002Ffey",{"label":565,"to":566},"Copperx design examples","\u002Fexamples\u002Fapps\u002Fcopper",{"label":568,"to":569},"Angellist design examples","\u002Fexamples\u002Fapps\u002Fangellist",{"label":571,"to":572},"Pipe design examples","\u002Fexamples\u002Fapps\u002Fpipe",{"published_at":574,"updated_at":575},"2023-07-03T14:22:45.000Z","2026-09-05T20:19:42.775Z"]