[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Freadymag\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":48,"showcases":188,"links":189,"dates":226},"\u002Fexamples\u002Fapps\u002Freadymag\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Readymag UI components examples - Nicelydone","Browse Readymag UI component design examples. Preview individual interface elements and explore related component categories. Create websites, magazines,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F50731b9a-ba41-47e2-bc0c-d958393c4ad0.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},"Readymag design examples","\u002Fexamples\u002Fapps\u002Freadymag",{"label":23,"to":4},"Readymag UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Readymag UI component design examples. Preview individual interface elements and explore related component categories. Create websites, magazines, presentations & more.",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Readymag","readymag","Create websites, magazines, presentations & more.","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freadymag-a7b8580b.png","https:\u002F\u002Freadymag.com\u002F",[36,40,44],{"id":37,"title":38,"slug":39},7,"Web Development","web-development",{"id":41,"title":42,"slug":43},8,"Design","design",{"id":45,"title":46,"slug":47},96,"No code","no-code",[49,64,77,90,99,112,125,135,145,155,165,175],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"a8527ced-18ae-4eb7-a749-1c73c159fff2","Readymag UI component","A modal prompting the user to upgrade their plan to embed their project as an iframe.",1111,1066,"UI component from Readymag","component",[58],{"id":59,"title":60,"slug":61},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":51,"description":66,"canonical_path":4,"image":67,"width":68,"height":69,"image_alt":55,"kind":56,"categories":70,"app":75},"beaaff6a-4e60-4d2a-bc12-111ba0f7edd1","A billing selection modal with radio buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbbe817ba-feb1-4f12-9692-14e38d5426b4.png",776,254,[71],{"id":72,"title":73,"slug":74},216,"Radio button","radio-button",{"slug":31,"title":30,"logo":33,"categories":76},[],{"uuid":78,"title":51,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":55,"kind":56,"categories":83,"app":88},"a873a213-035d-4e18-87db-2f577aac81df","A pricing table for a SaaS product.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F062b2c19-ece0-4877-b1c4-86926f79d038.png",2744,1064,[84],{"id":85,"title":86,"slug":87},303,"Pricing section","pricing-section",{"slug":31,"title":30,"logo":33,"categories":89},[],{"uuid":91,"title":51,"description":92,"canonical_path":4,"image":93,"width":81,"height":94,"image_alt":55,"kind":56,"categories":95,"app":97},"63c47451-9ee4-4e3c-b0cd-9abe575560f1","A pricing table with two options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F57249a9c-d64e-40d8-899d-418fed6f1187.png",1024,[96],{"id":85,"title":86,"slug":87},{"slug":31,"title":30,"logo":33,"categories":98},[],{"uuid":100,"title":51,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":55,"kind":56,"categories":105,"app":110},"5b052404-2ce5-414e-a2f7-52da7e90b35a","A simple menu with a user avatar and a plus icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F01dc22ac-de1b-4ee7-b753-f99473d126b3.png",416,1837,[106],{"id":107,"title":108,"slug":109},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":111},[],{"uuid":113,"title":51,"description":114,"canonical_path":4,"image":115,"width":116,"height":117,"image_alt":55,"kind":56,"categories":118,"app":123},"33d5188b-1c99-4e83-8cdf-b932a00cd7db","Animation settings modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F09d200ee-d1cd-4660-aad1-f3ee93867e1c.png",634,1569,[119],{"id":120,"title":121,"slug":122},246,"Toolbox","toolbox",{"slug":31,"title":30,"logo":33,"categories":124},[],{"uuid":126,"title":51,"description":127,"canonical_path":4,"image":128,"width":129,"height":130,"image_alt":55,"kind":56,"categories":131,"app":133},"29794212-0d49-4e83-b6c6-41c2f0f38ec6","A modal displaying layers with grouping and actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F51f96dc0-320d-4c28-89df-62e4f9cd30f7.png",576,1834,[132],{"id":120,"title":121,"slug":122},{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":51,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":55,"kind":56,"categories":141,"app":143},"9b1ced2e-64e9-44b3-a673-10d8084d7564","A vertical list of icons in a modal.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F27f29e89-809c-4481-be77-cba5def9c3d3.png",188,1044,[142],{"id":120,"title":121,"slug":122},{"slug":31,"title":30,"logo":33,"categories":144},[],{"uuid":146,"title":51,"description":147,"canonical_path":4,"image":148,"width":149,"height":150,"image_alt":55,"kind":56,"categories":151,"app":153},"811d7aa9-6cba-43e3-b621-a9e3d6fbcbd5","A set of UI controls for a collaborative tool.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd2c9df07-e6ad-4bb2-a4ce-496b665545ec.png",3216,368,[152],{"id":120,"title":121,"slug":122},{"slug":31,"title":30,"logo":33,"categories":154},[],{"uuid":156,"title":51,"description":157,"canonical_path":4,"image":158,"width":159,"height":160,"image_alt":55,"kind":56,"categories":161,"app":163},"b7eebec7-6b2a-409c-b70d-ee0386aa7fed","A modal for adjusting grid settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc33b50c8-cfd3-440d-bf7f-1e66f13b5390.png",653,1124,[162],{"id":120,"title":121,"slug":122},{"slug":31,"title":30,"logo":33,"categories":164},[],{"uuid":166,"title":51,"description":167,"canonical_path":4,"image":168,"width":169,"height":170,"image_alt":55,"kind":56,"categories":171,"app":173},"1b1fab63-dbfc-4ffe-923e-92b959799274","A modal for adjusting shadow properties.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F77a92c85-102f-4b8e-ac6f-d6287b327e04.png",535,1297,[172],{"id":120,"title":121,"slug":122},{"slug":31,"title":30,"logo":33,"categories":174},[],{"uuid":176,"title":51,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":55,"kind":56,"categories":181,"app":186},"20d1816e-91e3-4af5-b999-947520524ccc","A modal for shadow settings with color and behavior options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5b201ef7-72ae-4bfa-be13-cc34e11f5771.png",544,1277,[182],{"id":183,"title":184,"slug":185},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":187},[],[],[190,193,196,199,202,205,208,210,214,218,222],{"label":191,"to":192},"Readymag product screens","\u002Fexamples\u002Fapps\u002Freadymag\u002Fscreens",{"label":194,"to":195},"Readymag marketing pages","\u002Fexamples\u002Fapps\u002Freadymag\u002Fmarketing",{"label":197,"to":198},"Readymag user flows","\u002Fexamples\u002Fapps\u002Freadymag\u002Fflows",{"label":200,"to":201},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":203,"to":204},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":206,"to":207},"No code app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fno-code",{"label":209,"to":18},"All SaaS app examples",{"label":211,"to":212,"description":213},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":215,"to":216,"description":217},"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":219,"to":220,"description":221},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":223,"to":224,"description":225},"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":227,"updated_at":228},"2016-05-25T14:10:35.000Z","2026-09-13T13:02:39.000Z"]