[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":41,"showcases":189,"links":190,"dates":221},"\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Magic Beans UI components examples - Nicelydone","Browse Magic Beans UI component design examples. Preview individual interface elements and explore related component categories. Run your startup finances…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffcfbe693-ba98-45bc-9e80-33d3dfe6cadd.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 UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Magic Beans UI component design examples. Preview individual interface elements and explore related component categories. Run your startup finances from Notion",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Magic Beans","magic-beans","Run your startup finances from Notion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmagicbeans-n98p1kc3.png","https:\u002F\u002Fmagicbeans.app","getmagicbeans",[37],{"id":38,"title":39,"slug":40},36,"Finance","finance",[42,57,70,83,96,109,122,135,148,158,171,180],{"uuid":43,"title":44,"description":45,"canonical_path":4,"image":11,"width":46,"height":47,"image_alt":48,"kind":49,"categories":50,"app":55},"62b32ab2-a55a-41b6-b0c0-032f37aa56ce","Magic Beans UI component","A success message modal",878,273,"UI component from Magic Beans","component",[51],{"id":52,"title":53,"slug":54},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":56},[],{"uuid":58,"title":44,"description":59,"canonical_path":4,"image":60,"width":61,"height":62,"image_alt":48,"kind":49,"categories":63,"app":68},"152059ef-07b6-488e-91a7-b3201483160c","A modal to select number format","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fefcfffba-f862-4eb1-8975-4c94077d37eb.png",1856,602,[64],{"id":65,"title":66,"slug":67},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":69},[],{"uuid":71,"title":44,"description":72,"canonical_path":4,"image":73,"width":74,"height":75,"image_alt":48,"kind":49,"categories":76,"app":81},"b8229333-d2ca-411c-856c-02a1bc798e90","A confirmation message","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff98d3eaf-3cac-4804-80fe-219a2f43d285.png",1008,385,[77],{"id":78,"title":79,"slug":80},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":82},[],{"uuid":84,"title":44,"description":85,"canonical_path":4,"image":86,"width":87,"height":88,"image_alt":48,"kind":49,"categories":89,"app":94},"6266b430-d29d-4f59-99ba-7401fcd044de","A stack of cards displaying bank account balances.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdf441c47-8354-4d98-88b1-2d7b1ab627aa.png",780,660,[90],{"id":91,"title":92,"slug":93},278,"Illustration","illustration",{"slug":31,"title":30,"logo":33,"categories":95},[],{"uuid":97,"title":44,"description":98,"canonical_path":4,"image":99,"width":100,"height":101,"image_alt":48,"kind":49,"categories":102,"app":107},"5e95a595-f3ab-4870-9dce-2ab41498cd98","A button with a tooltip","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4b0a9c92-df32-48b1-a9cb-8597f0c581dd.png",307,188,[103],{"id":104,"title":105,"slug":106},254,"Tooltip","tooltip-element",{"slug":31,"title":30,"logo":33,"categories":108},[],{"uuid":110,"title":44,"description":111,"canonical_path":4,"image":112,"width":113,"height":114,"image_alt":48,"kind":49,"categories":115,"app":120},"7cdeebe6-4eb4-4a9a-86a4-82d79b1c1c88","A dropdown menu with selectable options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6f86110c-7ea0-4f03-92a8-a7e519b97dd4.png",859,426,[116],{"id":117,"title":118,"slug":119},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":121},[],{"uuid":123,"title":44,"description":124,"canonical_path":4,"image":125,"width":126,"height":127,"image_alt":48,"kind":49,"categories":128,"app":133},"4c3bab6f-a636-4952-8e89-cea12b6e015a","A card displaying financial information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6b51334e-6e42-45fc-be2b-10bb39c7c8ae.png",768,500,[129],{"id":130,"title":131,"slug":132},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":44,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":48,"kind":49,"categories":141,"app":146},"eb0ba7bb-8204-4c29-9495-6a7769033a1d","A table of invoices with different statuses.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc9d95611-c4af-49ca-b231-1c0b18be4109.png",1792,960,[142],{"id":143,"title":144,"slug":145},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":147},[],{"uuid":149,"title":44,"description":150,"canonical_path":4,"image":151,"width":152,"height":153,"image_alt":48,"kind":49,"categories":154,"app":156},"c707a983-a70e-4e2c-ba36-803e6a7fa6c6","A modal showing financial data.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcfe3885d-6b67-49f0-ae28-698dd07ee13c.png",499,293,[155],{"id":104,"title":105,"slug":106},{"slug":31,"title":30,"logo":33,"categories":157},[],{"uuid":159,"title":44,"description":160,"canonical_path":4,"image":161,"width":162,"height":163,"image_alt":48,"kind":49,"categories":164,"app":169},"0a802e6f-53ec-489a-aaf3-e31b484dc4c5","A card displaying expense splits with progress bars.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F86a39f31-0e7e-4f72-aa85-ef7a6622ee81.png",872,984,[165],{"id":166,"title":167,"slug":168},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":170},[],{"uuid":172,"title":44,"description":173,"canonical_path":4,"image":174,"width":162,"height":175,"image_alt":48,"kind":49,"categories":176,"app":178},"660629bb-ec31-4a74-8f3f-97ad13e1a998","A card displaying financial expenses with a progress bar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F23b876f2-0d9f-4752-8bdd-d7438a272085.png",612,[177],{"id":130,"title":131,"slug":132},{"slug":31,"title":30,"logo":33,"categories":179},[],{"uuid":181,"title":44,"description":182,"canonical_path":4,"image":183,"width":139,"height":184,"image_alt":48,"kind":49,"categories":185,"app":187},"11cd9989-67d4-401e-874a-6ecab005a48e","A line chart showing revenue over expenses.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3afc708b-fe74-43e8-afb4-654f952ab2c3.png",856,[186],{"id":166,"title":167,"slug":168},{"slug":31,"title":30,"logo":33,"categories":188},[],[],[191,194,197,200,203,205,209,213,217],{"label":192,"to":193},"Magic Beans product screens","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fscreens",{"label":195,"to":196},"Magic Beans marketing pages","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fmarketing",{"label":198,"to":199},"Magic Beans user flows","\u002Fexamples\u002Fapps\u002Fmagic-beans\u002Fflows",{"label":201,"to":202},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":204,"to":18},"All SaaS app examples",{"label":206,"to":207,"description":208},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":210,"to":211,"description":212},"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":214,"to":215,"description":216},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":218,"to":219,"description":220},"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":222,"updated_at":223},"2023-07-21T14:24:37.000Z","2026-09-13T13:02:39.000Z"]