[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmagic-beans":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":40,"examples":52,"showcases":53,"links":365,"dates":395},"\u002Fexamples\u002Fapps\u002Fmagic-beans","detail","apps",true,{"title":9,"description":10,"og_image":11},"Magic Beans design examples - Nicelydone","Explore Magic Beans UI design examples. Run your startup finances from Notion","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Faee4d8e0-56bf-495e-b71c-1e210e892b67.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Magic Beans design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":39},"SaaS app examples",[24],{"title":25,"links":26},"Explore Magic Beans",[27,30,33,36],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fflows",{"label":34,"to":35},"UI components","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fcomponents",{"label":37,"to":38},"marketing pages","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fmarketing",[],{"title":41,"slug":42,"description":43,"logo":44,"url":45,"twitter_username":46,"categories":47},"Magic Beans","magic-beans","Run your startup finances from Notion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmagicbeans-n98p1kc3.png","https:\u002F\u002Fmagicbeans.app","getmagicbeans",[48],{"id":49,"title":50,"slug":51},36,"Finance","finance",[],[54,356,359,362],{"family":55,"examples":56},"screens",[57,109,125,143,167,188,218,240,261,281,302,332],{"uuid":58,"title":59,"description":60,"canonical_path":29,"image":11,"width":61,"height":62,"image_alt":63,"kind":64,"patterns":65,"component_categories":90,"app":107},"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",[66,75,81],{"id":67,"label":68,"slug":69,"rank":70,"group":71},121,"Request Access","request-access",0,{"id":72,"label":73,"slug":74},12,"States & Feedback","states-and-feedback",{"id":76,"label":77,"slug":78,"rank":79,"group":80},114,"Confirmation","confirmation",1,{"id":72,"label":73,"slug":74},{"id":82,"label":83,"slug":84,"rank":85,"group":86},97,"Integrations","integrations",2,{"id":87,"label":88,"slug":89},10,"Settings & Admin","settings-and-admin",[91,95,99,103],{"id":92,"title":93,"slug":94},168,"Accordion","accordion",{"id":96,"title":97,"slug":98},169,"Avatar","avatar",{"id":100,"title":101,"slug":102},174,"Card","card",{"id":104,"title":105,"slug":106},175,"Button","button",{"slug":42,"title":41,"logo":44,"categories":108},[],{"uuid":110,"title":59,"description":111,"canonical_path":29,"image":112,"width":61,"height":62,"image_alt":63,"kind":64,"patterns":113,"component_categories":118,"app":123},"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",[114,116],{"id":67,"label":68,"slug":69,"rank":70,"group":115},{"id":72,"label":73,"slug":74},{"id":82,"label":83,"slug":84,"rank":79,"group":117},{"id":87,"label":88,"slug":89},[119,120,121,122],{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":124},[],{"uuid":126,"title":59,"description":127,"canonical_path":29,"image":128,"width":61,"height":129,"image_alt":63,"kind":64,"patterns":130,"component_categories":137,"app":141},"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,[131,133,135],{"id":67,"label":68,"slug":69,"rank":70,"group":132},{"id":72,"label":73,"slug":74},{"id":82,"label":83,"slug":84,"rank":79,"group":134},{"id":87,"label":88,"slug":89},{"id":76,"label":77,"slug":78,"rank":85,"group":136},{"id":72,"label":73,"slug":74},[138,139,140],{"id":92,"title":93,"slug":94},{"id":96,"title":97,"slug":98},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":142},[],{"uuid":144,"title":59,"description":145,"canonical_path":29,"image":146,"width":61,"height":62,"image_alt":63,"kind":64,"patterns":147,"component_categories":162,"app":165},"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",[148,153,160],{"id":149,"label":150,"slug":151,"rank":70,"group":152},104,"Team Management","team-management",{"id":87,"label":88,"slug":89},{"id":154,"label":155,"slug":156,"rank":79,"group":157},23,"Select","select",{"id":85,"label":158,"slug":159},"Actions","actions",{"id":76,"label":77,"slug":78,"rank":85,"group":161},{"id":72,"label":73,"slug":74},[163,164],{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":166},[],{"uuid":168,"title":59,"description":169,"canonical_path":29,"image":170,"width":61,"height":62,"image_alt":63,"kind":64,"patterns":171,"component_categories":182,"app":186},"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",[172,177],{"id":173,"label":174,"slug":175,"rank":70,"group":176},133,"Invite Teammates","invite-teammates",{"id":85,"label":158,"slug":159},{"id":178,"label":179,"slug":180,"rank":79,"group":181},15,"Import & Export","import-and-export",{"id":85,"label":158,"slug":159},[183,184,185],{"id":96,"title":97,"slug":98},{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":187},[],{"uuid":189,"title":190,"description":191,"canonical_path":29,"image":192,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":194,"component_categories":210,"app":216},"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",[195,203,208],{"id":196,"label":197,"slug":198,"rank":70,"group":199},75,"Setup Wizard","setup-wizard",{"id":200,"label":201,"slug":202},7,"Onboarding & Education","onboarding-and-education",{"id":204,"label":205,"slug":206,"rank":79,"group":207},74,"Onboarding Checklist","onboarding-checklist",{"id":200,"label":201,"slug":202},{"id":154,"label":155,"slug":156,"rank":85,"group":209},{"id":85,"label":158,"slug":159},[211,215],{"id":212,"title":213,"slug":214},227,"Stepper","stepper",{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":217},[],{"uuid":219,"title":190,"description":220,"canonical_path":29,"image":221,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":222,"component_categories":235,"app":238},"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",[223,225,227,229],{"id":204,"label":205,"slug":206,"rank":70,"group":224},{"id":200,"label":201,"slug":202},{"id":154,"label":155,"slug":156,"rank":79,"group":226},{"id":85,"label":158,"slug":159},{"id":196,"label":197,"slug":198,"rank":85,"group":228},{"id":200,"label":201,"slug":202},{"id":230,"label":231,"slug":232,"rank":233,"group":234},22,"Search","search",3,{"id":85,"label":158,"slug":159},[236,237],{"id":212,"title":213,"slug":214},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":239},[],{"uuid":241,"title":190,"description":242,"canonical_path":29,"image":243,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":244,"component_categories":256,"app":259},"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",[245,247,252,254],{"id":196,"label":197,"slug":198,"rank":70,"group":246},{"id":200,"label":201,"slug":202},{"id":248,"label":249,"slug":250,"rank":79,"group":251},120,"Loading","loading",{"id":72,"label":73,"slug":74},{"id":230,"label":231,"slug":232,"rank":85,"group":253},{"id":85,"label":158,"slug":159},{"id":154,"label":155,"slug":156,"rank":233,"group":255},{"id":85,"label":158,"slug":159},[257,258],{"id":212,"title":213,"slug":214},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":260},[],{"uuid":262,"title":190,"description":263,"canonical_path":29,"image":264,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":265,"component_categories":275,"app":279},"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",[266,268,270],{"id":196,"label":197,"slug":198,"rank":70,"group":267},{"id":200,"label":201,"slug":202},{"id":204,"label":205,"slug":206,"rank":79,"group":269},{"id":200,"label":201,"slug":202},{"id":271,"label":272,"slug":273,"rank":85,"group":274},115,"Empty State","empty-state",{"id":72,"label":73,"slug":74},[276,277,278],{"id":212,"title":213,"slug":214},{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":280},[],{"uuid":282,"title":190,"description":283,"canonical_path":29,"image":284,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":285,"component_categories":292,"app":300},"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",[286,288,290],{"id":204,"label":205,"slug":206,"rank":70,"group":287},{"id":200,"label":201,"slug":202},{"id":196,"label":197,"slug":198,"rank":79,"group":289},{"id":200,"label":201,"slug":202},{"id":271,"label":272,"slug":273,"rank":85,"group":291},{"id":72,"label":73,"slug":74},[293,297,298,299],{"id":294,"title":295,"slug":296},260,"Badge","badge",{"id":212,"title":213,"slug":214},{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":301},[],{"uuid":303,"title":190,"description":304,"canonical_path":29,"image":305,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":306,"component_categories":326,"app":330},"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",[307,309,311,319,324],{"id":204,"label":205,"slug":206,"rank":70,"group":308},{"id":200,"label":201,"slug":202},{"id":196,"label":197,"slug":198,"rank":79,"group":310},{"id":200,"label":201,"slug":202},{"id":312,"label":313,"slug":314,"rank":85,"group":315},40,"Charts","charts",{"id":316,"label":317,"slug":318},4,"Data & Analysis","data-and-analysis",{"id":320,"label":321,"slug":322,"rank":233,"group":323},72,"Getting Started","getting-started",{"id":200,"label":201,"slug":202},{"id":271,"label":272,"slug":273,"rank":316,"group":325},{"id":72,"label":73,"slug":74},[327,328,329],{"id":212,"title":213,"slug":214},{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":331},[],{"uuid":333,"title":190,"description":334,"canonical_path":29,"image":335,"width":61,"height":62,"image_alt":193,"kind":64,"patterns":336,"component_categories":350,"app":354},"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",[337,339,341,343,348],{"id":204,"label":205,"slug":206,"rank":70,"group":338},{"id":200,"label":201,"slug":202},{"id":312,"label":313,"slug":314,"rank":79,"group":340},{"id":316,"label":317,"slug":318},{"id":196,"label":197,"slug":198,"rank":85,"group":342},{"id":200,"label":201,"slug":202},{"id":344,"label":345,"slug":346,"rank":233,"group":347},44,"Progress","progress",{"id":316,"label":317,"slug":318},{"id":271,"label":272,"slug":273,"rank":316,"group":349},{"id":72,"label":73,"slug":74},[351,352,353],{"id":212,"title":213,"slug":214},{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"slug":42,"title":41,"logo":44,"categories":355},[],{"family":357,"examples":358},"flows",[],{"family":360,"examples":361},"components",[],{"family":363,"examples":364},"pages",[],[366,368,370,372,374,377,379,383,387,391],{"label":367,"to":29},"Magic Beans product screens",{"label":369,"to":38},"Magic Beans marketing pages",{"label":371,"to":32},"Magic Beans user flows",{"label":373,"to":35},"Magic Beans UI components",{"label":375,"to":376},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":378,"to":18},"All SaaS app examples",{"label":380,"to":381,"description":382},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":384,"to":385,"description":386},"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":388,"to":389,"description":390},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":392,"to":393,"description":394},"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":396,"updated_at":397},"2023-07-21T14:21:09.000Z","2026-09-13T13:02:39.000Z"]