[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fplay\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":45,"showcases":328,"links":329,"dates":387},"\u002Fexamples\u002Fapps\u002Fplay\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Play product screens examples - Nicelydone","Browse Play screen design examples. Preview the interface screenshots and explore related UI patterns. The first native iOS design tool for creating mobile…","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa97c29fa-6963-4908-88f5-f1ffce58426d.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},"Play design examples","\u002Fexamples\u002Fapps\u002Fplay",{"label":23,"to":4},"Play product screens examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Play screen design examples. Preview the interface screenshots and explore related UI patterns. The first native iOS design tool for creating mobile products.",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Play","play","The first native iOS design tool for creating mobile products. ","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fplay-abd625a7.png","https:\u002F\u002Fwww.createwithplay.com","createwithplay",[37,41],{"id":38,"title":39,"slug":40},54,"Mobile","mobile",{"id":42,"title":43,"slug":44},7,"Web Development","web-development",[46,83,95,106,126,169,202,221,252,269,289,310],{"uuid":47,"title":30,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":53,"component_categories":68,"app":81},"a97c29fa-6963-4908-88f5-f1ffce58426d","Sign in screen where the user authenticates with email and password, or scans a QR code to download the companion iPhone app.",3024,1674,"Play from Play","screen",[54,63],{"id":55,"label":56,"slug":57,"rank":58,"group":59},4,"Sign In","sign-in",0,{"id":60,"label":61,"slug":62},1,"Access & Account","access-and-account",{"id":64,"label":65,"slug":66,"rank":60,"group":67},2,"Forgot Password","forgot-password",{"id":60,"label":61,"slug":62},[69,73,77],{"id":70,"title":71,"slug":72},240,"Horizontal navigation","horizontal-navigation",{"id":74,"title":75,"slug":76},174,"Card","card",{"id":78,"title":79,"slug":80},175,"Button","button",{"slug":31,"title":30,"logo":33,"categories":82},[],{"uuid":84,"title":30,"description":85,"canonical_path":4,"image":86,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":87,"component_categories":90,"app":93},"76ab5491-6f28-4b72-8694-80236cb34c49","Password recovery screen where the user enters their email address to receive a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F76ab5491-6f28-4b72-8694-80236cb34c49.png",[88],{"id":64,"label":65,"slug":66,"rank":58,"group":89},{"id":60,"label":61,"slug":62},[91,92],{"id":70,"title":71,"slug":72},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":30,"description":85,"canonical_path":4,"image":97,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":98,"component_categories":101,"app":104},"83350abd-f2f0-479c-92f6-2eb439859d50","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F83350abd-f2f0-479c-92f6-2eb439859d50.png",[99],{"id":64,"label":65,"slug":66,"rank":58,"group":100},{"id":60,"label":61,"slug":62},[102,103],{"id":70,"title":71,"slug":72},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":30,"description":108,"canonical_path":4,"image":109,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":110,"component_categories":121,"app":124},"97d51b2b-1e7e-434e-86b3-ffacf063b054","Password recovery screen showing an error message when the user attempts to send a reset link to an unregistered email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F97d51b2b-1e7e-434e-86b3-ffacf063b054.png",[111,113],{"id":64,"label":65,"slug":66,"rank":58,"group":112},{"id":60,"label":61,"slug":62},{"id":114,"label":115,"slug":116,"rank":60,"group":117},116,"Error","error",{"id":118,"label":119,"slug":120},12,"States & Feedback","states-and-feedback",[122,123],{"id":70,"title":71,"slug":72},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":125},[],{"uuid":127,"title":128,"description":129,"canonical_path":4,"image":130,"width":49,"height":50,"image_alt":131,"kind":52,"patterns":132,"component_categories":156,"app":167},"382c4afe-0455-46c7-b679-922e4be66bbc","My Workspace | Play","List view where the user browses their design projects in a grid layout, sorts them by modification date, and can create new projects.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F382c4afe-0455-46c7-b679-922e4be66bbc.png","My Workspace | Play from Play",[133,141,149],{"id":134,"label":135,"slug":136,"rank":58,"group":137},79,"Browse","browse",{"id":138,"label":139,"slug":140},8,"Pages & Content","pages-and-content",{"id":142,"label":143,"slug":144,"rank":60,"group":145},104,"Team Management","team-management",{"id":146,"label":147,"slug":148},10,"Settings & Admin","settings-and-admin",{"id":150,"label":151,"slug":152,"rank":64,"group":153},13,"Filter & Sort","filter-and-sort",{"id":64,"label":154,"slug":155},"Actions","actions",[157,161,162,166],{"id":158,"title":159,"slug":160},260,"Badge","badge",{"id":74,"title":75,"slug":76},{"id":163,"title":164,"slug":165},169,"Avatar","avatar",{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":168},[],{"uuid":170,"title":171,"description":172,"canonical_path":4,"image":173,"width":49,"height":174,"image_alt":175,"kind":52,"patterns":176,"component_categories":196,"app":200},"235039c1-f299-440b-b777-66a55a487f19","Learn Play Interactions | Play","List view where the user browses and sorts design pages within a project, viewing them as a grid of visual previews.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F235039c1-f299-440b-b777-66a55a487f19.png",2452,"Learn Play Interactions | Play from Play",[177,179,186,188],{"id":134,"label":135,"slug":136,"rank":58,"group":178},{"id":138,"label":139,"slug":140},{"id":180,"label":181,"slug":182,"rank":60,"group":183},47,"Table","table",{"id":55,"label":184,"slug":185},"Data & Analysis","data-and-analysis",{"id":150,"label":151,"slug":152,"rank":64,"group":187},{"id":64,"label":154,"slug":155},{"id":189,"label":190,"slug":191,"rank":192,"group":193},76,"Tutorial","tutorial",3,{"id":42,"label":194,"slug":195},"Onboarding & Education","onboarding-and-education",[197,198,199],{"id":74,"title":75,"slug":76},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":201},[],{"uuid":203,"title":171,"description":204,"canonical_path":4,"image":205,"width":49,"height":50,"image_alt":175,"kind":52,"patterns":206,"component_categories":214,"app":219},"07de9074-23d6-4f67-8eef-268b46e08c83","List view where the user browses and manages pages within a specific design project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F07de9074-23d6-4f67-8eef-268b46e08c83.png",[207,209],{"id":134,"label":135,"slug":136,"rank":58,"group":208},{"id":138,"label":139,"slug":140},{"id":210,"label":211,"slug":212,"rank":60,"group":213},23,"Select","select",{"id":64,"label":154,"slug":155},[215,216,217,218],{"id":158,"title":159,"slug":160},{"id":74,"title":75,"slug":76},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":220},[],{"uuid":222,"title":171,"description":223,"canonical_path":4,"image":224,"width":49,"height":50,"image_alt":175,"kind":52,"patterns":225,"component_categories":241,"app":250},"38b935da-7a9c-455d-8c41-80edef5a84f2","Project pages gallery where the user is renaming a specific page via a modal overlay.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F38b935da-7a9c-455d-8c41-80edef5a84f2.png",[226,231,236],{"id":227,"label":228,"slug":229,"rank":58,"group":230},11,"Edit","edit",{"id":64,"label":154,"slug":155},{"id":232,"label":233,"slug":234,"rank":60,"group":235},80,"Files","files",{"id":138,"label":139,"slug":140},{"id":237,"label":238,"slug":239,"rank":64,"group":240},114,"Confirmation","confirmation",{"id":118,"label":119,"slug":120},[242,246,247,248,249],{"id":243,"title":244,"slug":245},284,"Modal","modal",{"id":158,"title":159,"slug":160},{"id":74,"title":75,"slug":76},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":251},[],{"uuid":253,"title":128,"description":254,"canonical_path":4,"image":255,"width":49,"height":50,"image_alt":131,"kind":52,"patterns":256,"component_categories":263,"app":267},"bfe2ad3d-cc4f-484b-860d-0ff30a69949d","List view where the user browses their workspace projects in a grid layout, with an active dropdown to sort by modification date or alphabetically.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbfe2ad3d-cc4f-484b-860d-0ff30a69949d.png",[257,259,261],{"id":134,"label":135,"slug":136,"rank":58,"group":258},{"id":138,"label":139,"slug":140},{"id":142,"label":143,"slug":144,"rank":60,"group":260},{"id":146,"label":147,"slug":148},{"id":150,"label":151,"slug":152,"rank":64,"group":262},{"id":64,"label":154,"slug":155},[264,265,266],{"id":74,"title":75,"slug":76},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":268},[],{"uuid":270,"title":128,"description":271,"canonical_path":4,"image":272,"width":49,"height":50,"image_alt":131,"kind":52,"patterns":273,"component_categories":283,"app":287},"8007cddb-6cfc-4df2-8bb3-6ef6f2e2a57f","List view where the user manages their workspace projects and can invite new members to the team.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8007cddb-6cfc-4df2-8bb3-6ef6f2e2a57f.png",[274,276,281],{"id":142,"label":143,"slug":144,"rank":58,"group":275},{"id":146,"label":147,"slug":148},{"id":277,"label":278,"slug":279,"rank":60,"group":280},133,"Invite Teammates","invite-teammates",{"id":64,"label":154,"slug":155},{"id":180,"label":181,"slug":182,"rank":64,"group":282},{"id":55,"label":184,"slug":185},[284,285,286],{"id":158,"title":159,"slug":160},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":288},[],{"uuid":290,"title":128,"description":291,"canonical_path":4,"image":292,"width":49,"height":50,"image_alt":131,"kind":52,"patterns":293,"component_categories":303,"app":308},"6d2c4514-57b1-42ef-8bd8-220e84b1f6c2","List view of projects with a centered modal open for the user to name and create a new project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6d2c4514-57b1-42ef-8bd8-220e84b1f6c2.png",[294,296,298],{"id":180,"label":181,"slug":182,"rank":58,"group":295},{"id":55,"label":184,"slug":185},{"id":142,"label":143,"slug":144,"rank":60,"group":297},{"id":146,"label":147,"slug":148},{"id":299,"label":300,"slug":301,"rank":64,"group":302},81,"Home","home",{"id":138,"label":139,"slug":140},[304,305,306,307],{"id":243,"title":244,"slug":245},{"id":158,"title":159,"slug":160},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":309},[],{"uuid":311,"title":128,"description":312,"canonical_path":4,"image":313,"width":49,"height":50,"image_alt":131,"kind":52,"patterns":314,"component_categories":322,"app":326},"b0cbb37e-504f-4cb3-879e-e730fd5b56c4","List view of projects with a modal open where the user names and creates a new app project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb0cbb37e-504f-4cb3-879e-e730fd5b56c4.png",[315,317],{"id":142,"label":143,"slug":144,"rank":58,"group":316},{"id":146,"label":147,"slug":148},{"id":318,"label":319,"slug":320,"rank":60,"group":321},41,"Dashboard","dashboard",{"id":55,"label":184,"slug":185},[323,324,325],{"id":243,"title":244,"slug":245},{"id":163,"title":164,"slug":165},{"id":78,"title":79,"slug":80},{"slug":31,"title":30,"logo":33,"categories":327},[],[],[330,332,334,336,338,340,342,344,346,348,350,352,354,357,360,363,366,369,371,375,379,383],{"label":143,"to":331},"\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":135,"to":333},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":65,"to":335},"\u002Fexamples\u002Fscreens\u002Fforgot-password",{"label":151,"to":337},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":181,"to":339},"\u002Fexamples\u002Fscreens\u002Ftable",{"label":238,"to":341},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":319,"to":343},"\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":228,"to":345},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":115,"to":347},"\u002Fexamples\u002Fscreens\u002Ferror",{"label":233,"to":349},"\u002Fexamples\u002Fscreens\u002Ffiles",{"label":300,"to":351},"\u002Fexamples\u002Fscreens\u002Fhome",{"label":278,"to":353},"\u002Fexamples\u002Fscreens\u002Finvite-teammates",{"label":355,"to":356},"Play marketing pages","\u002Fexamples\u002Fapps\u002Fplay\u002Fmarketing",{"label":358,"to":359},"Play user flows","\u002Fexamples\u002Fapps\u002Fplay\u002Fflows",{"label":361,"to":362},"Play UI components","\u002Fexamples\u002Fapps\u002Fplay\u002Fcomponents",{"label":364,"to":365},"Mobile app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmobile",{"label":367,"to":368},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":370,"to":18},"All SaaS app examples",{"label":372,"to":373,"description":374},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":376,"to":377,"description":378},"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":380,"to":381,"description":382},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":384,"to":385,"description":386},"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":388,"updated_at":389},"2022-09-13T12:12:11.000Z","2026-09-13T13:02:39.000Z"]