[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":40,"showcases":340,"links":341,"dates":396},"\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Magic Beans product screens examples - Nicelydone","Browse Magic Beans screen design examples. Preview the interface screenshots and explore related UI patterns. Run your startup finances from Notion","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Faee4d8e0-56bf-495e-b71c-1e210e892b67.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Magic Beans design examples","\u002Fexamples\u002Fapps\u002Fmagic-beans",{"label":23,"to":4},"Magic Beans product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"Magic Beans","magic-beans","Run your startup finances from Notion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmagicbeans-n98p1kc3.png","https:\u002F\u002Fmagicbeans.app","getmagicbeans",[36],{"id":37,"title":38,"slug":39},36,"Finance","finance",[41,93,109,127,151,172,202,224,245,265,286,316],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":49,"component_categories":74,"app":91},"aee4d8e0-56bf-495e-b71c-1e210e892b67","Notion – The all-in-one workspace for your notes, tasks, wikis, a","OAuth consent screen where the user reviews requested permissions and selects pages to grant Magic Beans access to their Notion workspace.",3024,1738,"Notion – The all-in-one workspace for your notes, tasks, wikis, a from Magic Beans","screen",[50,59,65],{"id":51,"label":52,"slug":53,"rank":54,"group":55},121,"Request Access","request-access",0,{"id":56,"label":57,"slug":58},12,"States & Feedback","states-and-feedback",{"id":60,"label":61,"slug":62,"rank":63,"group":64},114,"Confirmation","confirmation",1,{"id":56,"label":57,"slug":58},{"id":66,"label":67,"slug":68,"rank":69,"group":70},97,"Integrations","integrations",2,{"id":71,"label":72,"slug":73},10,"Settings & Admin","settings-and-admin",[75,79,83,87],{"id":76,"title":77,"slug":78},168,"Accordion","accordion",{"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":30,"title":29,"logo":32,"categories":92},[],{"uuid":94,"title":43,"description":95,"canonical_path":4,"image":96,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":97,"component_categories":102,"app":107},"6444b6bd-a87f-4da5-a61b-5fdc2c02e5dd","OAuth consent screen where the user reviews and grants Magic Beans permission to view, edit, and create content in their Notion workspace.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6444b6bd-a87f-4da5-a61b-5fdc2c02e5dd.png",[98,100],{"id":51,"label":52,"slug":53,"rank":54,"group":99},{"id":56,"label":57,"slug":58},{"id":66,"label":67,"slug":68,"rank":63,"group":101},{"id":71,"label":72,"slug":73},[103,104,105,106],{"id":76,"title":77,"slug":78},{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":108},[],{"uuid":110,"title":43,"description":111,"canonical_path":4,"image":112,"width":45,"height":113,"image_alt":47,"kind":48,"patterns":114,"component_categories":121,"app":125},"f79cd32a-d336-46cf-8520-9770ad5fc4cd","OAuth consent screen where the user reviews requested permissions before selecting pages to share with a third-party integration.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff79cd32a-d336-46cf-8520-9770ad5fc4cd.png",2076,[115,117,119],{"id":51,"label":52,"slug":53,"rank":54,"group":116},{"id":56,"label":57,"slug":58},{"id":66,"label":67,"slug":68,"rank":63,"group":118},{"id":71,"label":72,"slug":73},{"id":60,"label":61,"slug":62,"rank":69,"group":120},{"id":56,"label":57,"slug":58},[122,123,124],{"id":76,"title":77,"slug":78},{"id":80,"title":81,"slug":82},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":126},[],{"uuid":128,"title":43,"description":129,"canonical_path":4,"image":130,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":131,"component_categories":146,"app":149},"dfd0c454-e99f-4f6a-9140-723ceb5493ae","OAuth consent screen where the user selects specific Notion pages to share with the Magic Beans integration.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdfd0c454-e99f-4f6a-9140-723ceb5493ae.png",[132,137,144],{"id":133,"label":134,"slug":135,"rank":54,"group":136},104,"Team Management","team-management",{"id":71,"label":72,"slug":73},{"id":138,"label":139,"slug":140,"rank":63,"group":141},23,"Select","select",{"id":69,"label":142,"slug":143},"Actions","actions",{"id":60,"label":61,"slug":62,"rank":69,"group":145},{"id":56,"label":57,"slug":58},[147,148],{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":150},[],{"uuid":152,"title":43,"description":153,"canonical_path":4,"image":154,"width":45,"height":46,"image_alt":47,"kind":48,"patterns":155,"component_categories":166,"app":170},"9d103580-39fa-4048-bb0f-ab36b5bac7b3","OAuth consent screen where the user selects specific Notion pages to grant access to the Magic Beans integration.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9d103580-39fa-4048-bb0f-ab36b5bac7b3.png",[156,161],{"id":157,"label":158,"slug":159,"rank":54,"group":160},133,"Invite Teammates","invite-teammates",{"id":69,"label":142,"slug":143},{"id":162,"label":163,"slug":164,"rank":63,"group":165},15,"Import & Export","import-and-export",{"id":69,"label":142,"slug":143},[167,168,169],{"id":80,"title":81,"slug":82},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":171},[],{"uuid":173,"title":174,"description":175,"canonical_path":4,"image":176,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":178,"component_categories":194,"app":200},"f81d25d7-6d9f-4a1a-9d8c-a029bbdd2e15","Onboarding - Magic Beans","Onboarding step where the user selects a Notion database to store their finance data.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ff81d25d7-6d9f-4a1a-9d8c-a029bbdd2e15.png","Onboarding - Magic Beans from Magic Beans",[179,187,192],{"id":180,"label":181,"slug":182,"rank":54,"group":183},75,"Setup Wizard","setup-wizard",{"id":184,"label":185,"slug":186},7,"Onboarding & Education","onboarding-and-education",{"id":188,"label":189,"slug":190,"rank":63,"group":191},74,"Onboarding Checklist","onboarding-checklist",{"id":184,"label":185,"slug":186},{"id":138,"label":139,"slug":140,"rank":69,"group":193},{"id":69,"label":142,"slug":143},[195,199],{"id":196,"title":197,"slug":198},227,"Stepper","stepper",{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":201},[],{"uuid":203,"title":174,"description":204,"canonical_path":4,"image":205,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":206,"component_categories":219,"app":222},"c0c6d29d-2d16-4e45-8f50-627e2726aef7","Onboarding step where the user searches for and selects a Notion database to store their finance data.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc0c6d29d-2d16-4e45-8f50-627e2726aef7.png",[207,209,211,213],{"id":188,"label":189,"slug":190,"rank":54,"group":208},{"id":184,"label":185,"slug":186},{"id":138,"label":139,"slug":140,"rank":63,"group":210},{"id":69,"label":142,"slug":143},{"id":180,"label":181,"slug":182,"rank":69,"group":212},{"id":184,"label":185,"slug":186},{"id":214,"label":215,"slug":216,"rank":217,"group":218},22,"Search","search",3,{"id":69,"label":142,"slug":143},[220,221],{"id":196,"title":197,"slug":198},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":223},[],{"uuid":225,"title":174,"description":226,"canonical_path":4,"image":227,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":228,"component_categories":240,"app":243},"2ef716ea-d0c1-4e9d-a788-46002ba4324f","Onboarding step where the user searches for and selects a Notion database to store their finance data, currently showing a syncing state.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2ef716ea-d0c1-4e9d-a788-46002ba4324f.png",[229,231,236,238],{"id":180,"label":181,"slug":182,"rank":54,"group":230},{"id":184,"label":185,"slug":186},{"id":232,"label":233,"slug":234,"rank":63,"group":235},120,"Loading","loading",{"id":56,"label":57,"slug":58},{"id":214,"label":215,"slug":216,"rank":69,"group":237},{"id":69,"label":142,"slug":143},{"id":138,"label":139,"slug":140,"rank":217,"group":239},{"id":69,"label":142,"slug":143},[241,242],{"id":196,"title":197,"slug":198},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":244},[],{"uuid":246,"title":174,"description":247,"canonical_path":4,"image":248,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":249,"component_categories":259,"app":263},"a8674f4c-e21a-4090-bde7-ddfbe30326d7","Onboarding step where the user is instructed to copy an embed code for their first chart and paste it into Notion.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa8674f4c-e21a-4090-bde7-ddfbe30326d7.png",[250,252,254],{"id":180,"label":181,"slug":182,"rank":54,"group":251},{"id":184,"label":185,"slug":186},{"id":188,"label":189,"slug":190,"rank":63,"group":253},{"id":184,"label":185,"slug":186},{"id":255,"label":256,"slug":257,"rank":69,"group":258},115,"Empty State","empty-state",{"id":56,"label":57,"slug":58},[260,261,262],{"id":196,"title":197,"slug":198},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":264},[],{"uuid":266,"title":174,"description":267,"canonical_path":4,"image":268,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":269,"component_categories":276,"app":284},"41969f4c-0320-4d30-8a14-affb0b17b69d","Onboarding step where the user previews their first revenue chart and is instructed to copy the embed link for Notion.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F41969f4c-0320-4d30-8a14-affb0b17b69d.png",[270,272,274],{"id":188,"label":189,"slug":190,"rank":54,"group":271},{"id":184,"label":185,"slug":186},{"id":180,"label":181,"slug":182,"rank":63,"group":273},{"id":184,"label":185,"slug":186},{"id":255,"label":256,"slug":257,"rank":69,"group":275},{"id":56,"label":57,"slug":58},[277,281,282,283],{"id":278,"title":279,"slug":280},260,"Badge","badge",{"id":196,"title":197,"slug":198},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":285},[],{"uuid":287,"title":174,"description":288,"canonical_path":4,"image":289,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":290,"component_categories":310,"app":314},"446c1654-9276-4c2c-830a-398c8c2fb3ef","Onboarding step where the user is instructed to copy an embed link for their first revenue chart to paste into Notion.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F446c1654-9276-4c2c-830a-398c8c2fb3ef.png",[291,293,295,303,308],{"id":188,"label":189,"slug":190,"rank":54,"group":292},{"id":184,"label":185,"slug":186},{"id":180,"label":181,"slug":182,"rank":63,"group":294},{"id":184,"label":185,"slug":186},{"id":296,"label":297,"slug":298,"rank":69,"group":299},40,"Charts","charts",{"id":300,"label":301,"slug":302},4,"Data & Analysis","data-and-analysis",{"id":304,"label":305,"slug":306,"rank":217,"group":307},72,"Getting Started","getting-started",{"id":184,"label":185,"slug":186},{"id":255,"label":256,"slug":257,"rank":300,"group":309},{"id":56,"label":57,"slug":58},[311,312,313],{"id":196,"title":197,"slug":198},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":315},[],{"uuid":317,"title":174,"description":318,"canonical_path":4,"image":319,"width":45,"height":46,"image_alt":177,"kind":48,"patterns":320,"component_categories":334,"app":338},"ab2a0fd1-f074-4209-afc5-43c1fbb1a138","Onboarding step where the user previews their first revenue chart, interacts with a time-range dropdown, and can copy an embed code for Notion.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fab2a0fd1-f074-4209-afc5-43c1fbb1a138.png",[321,323,325,327,332],{"id":188,"label":189,"slug":190,"rank":54,"group":322},{"id":184,"label":185,"slug":186},{"id":296,"label":297,"slug":298,"rank":63,"group":324},{"id":300,"label":301,"slug":302},{"id":180,"label":181,"slug":182,"rank":69,"group":326},{"id":184,"label":185,"slug":186},{"id":328,"label":329,"slug":330,"rank":217,"group":331},44,"Progress","progress",{"id":300,"label":301,"slug":302},{"id":255,"label":256,"slug":257,"rank":300,"group":333},{"id":56,"label":57,"slug":58},[335,336,337],{"id":196,"title":197,"slug":198},{"id":84,"title":85,"slug":86},{"id":88,"title":89,"slug":90},{"slug":30,"title":29,"logo":32,"categories":339},[],[],[342,344,346,348,350,352,354,356,358,360,362,364,366,369,372,375,378,380,384,388,392],{"label":181,"to":343},"\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":189,"to":345},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":256,"to":347},"\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":139,"to":349},"\u002Fexamples\u002Fscreens\u002Fselect",{"label":61,"to":351},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":67,"to":353},"\u002Fexamples\u002Fscreens\u002Fintegrations",{"label":52,"to":355},"\u002Fexamples\u002Fscreens\u002Frequest-access",{"label":297,"to":357},"\u002Fexamples\u002Fscreens\u002Fcharts",{"label":215,"to":359},"\u002Fexamples\u002Fscreens\u002Fsearch",{"label":305,"to":361},"\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":163,"to":363},"\u002Fexamples\u002Fscreens\u002Fimport-and-export",{"label":158,"to":365},"\u002Fexamples\u002Fscreens\u002Finvite-teammates",{"label":367,"to":368},"Magic Beans marketing pages","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fmarketing",{"label":370,"to":371},"Magic Beans user flows","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fflows",{"label":373,"to":374},"Magic Beans UI components","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fcomponents",{"label":376,"to":377},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":379,"to":18},"All SaaS app examples",{"label":381,"to":382,"description":383},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":385,"to":386,"description":387},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":389,"to":390,"description":391},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":393,"to":394,"description":395},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":397,"updated_at":398},"2023-07-21T14:21:09.000Z","2026-09-13T13:02:39.000Z"]