[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":48,"showcases":390,"links":391,"dates":452},"\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Playbook product screens examples - Nicelydone","Browse Playbook screen design examples. Preview the interface screenshots and explore related UI patterns. Make your creative work beauuutiful","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F575296f9-e181-4f7a-9033-f6e96781f2c6.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},"Playbook design examples","\u002Fexamples\u002Fapps\u002Fplaybook-hq",{"label":23,"to":4},"Playbook 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},"Playbook","playbook-hq","Make your creative work beauuutiful","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fplaybook-gp89hhmz.png","https:\u002F\u002Fwww.playbook.com","playbook_hq",[36,40,44],{"id":37,"title":38,"slug":39},8,"Design","design",{"id":41,"title":42,"slug":43},23,"Collaboration","collaboration",{"id":45,"title":46,"slug":47},71,"File sharing","file-sharing",[49,92,136,188,212,242,260,293,321,343,360,374],{"uuid":50,"title":51,"description":52,"canonical_path":53,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":58,"component_categories":67,"app":88},"575296f9-e181-4f7a-9033-f6e96781f2c6","MarchPortfolioMonth","Signup modal prompting the user to authenticate with Google or email to collaborate on the community portfolio showcase.","\u002Fexamples\u002Fapps\u002Fplaybook\u002Fscreens",3024,1738,"MarchPortfolioMonth from Playbook","screen",[59],{"id":60,"label":61,"slug":62,"rank":63,"group":64},79,"Browse","browse",0,{"id":37,"label":65,"slug":66},"Pages & Content","pages-and-content",[68,72,76,80,84],{"id":69,"title":70,"slug":71},284,"Modal","modal",{"id":73,"title":74,"slug":75},240,"Horizontal navigation","horizontal-navigation",{"id":77,"title":78,"slug":79},169,"Avatar","avatar",{"id":81,"title":82,"slug":83},174,"Card","card",{"id":85,"title":86,"slug":87},175,"Button","button",{"slug":89,"title":29,"logo":90,"categories":91},"playbook","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fplaybook-9f70a0d7.png",[],{"uuid":93,"title":51,"description":94,"canonical_path":53,"image":95,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":96,"component_categories":122,"app":134},"67c1bd50-49eb-47e5-b459-814c5e5806f6","Community showcase page where users can browse, sort, and comment on portfolio submissions for a monthly competition.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F67c1bd50-49eb-47e5-b459-814c5e5806f6.png",[97,99,108,116],{"id":60,"label":61,"slug":62,"rank":63,"group":98},{"id":37,"label":65,"slug":66},{"id":100,"label":101,"slug":102,"rank":103,"group":104},106,"Comments","comments",1,{"id":105,"label":106,"slug":107},11,"Social & Collaboration","social-and-collaboration",{"id":109,"label":110,"slug":111,"rank":112,"group":113},22,"Search","search",2,{"id":112,"label":114,"slug":115},"Actions","actions",{"id":117,"label":118,"slug":119,"rank":120,"group":121},13,"Filter & Sort","filter-and-sort",3,{"id":112,"label":114,"slug":115},[123,127,131,132,133],{"id":124,"title":125,"slug":126},214,"Popover","popover",{"id":128,"title":129,"slug":130},258,"Header","header",{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":135},[],{"uuid":137,"title":51,"description":138,"canonical_path":53,"image":139,"width":54,"height":140,"image_alt":56,"kind":57,"patterns":141,"component_categories":170,"app":186},"13afb104-12df-45dd-8db2-0b9eec7932ce","A shared detail view presenting a step-by-step guide on how to upload and publish a portfolio to the community.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F13afb104-12df-45dd-8db2-0b9eec7932ce.png",2519,[142,147,155,159,164],{"id":143,"label":144,"slug":145,"rank":63,"group":146},82,"Media Detail","media-detail",{"id":37,"label":65,"slug":66},{"id":148,"label":149,"slug":150,"rank":103,"group":151},78,"Article","article",{"id":152,"label":153,"slug":154},15,"Marketing Page Types","marketing-page-types",{"id":120,"label":156,"slug":157,"rank":112,"group":158},"Profile","profile",{"id":105,"label":106,"slug":107},{"id":160,"label":161,"slug":162,"rank":120,"group":163},17,"Publish","publish",{"id":112,"label":114,"slug":115},{"id":165,"label":166,"slug":167,"rank":168,"group":169},25,"Upload & Download","upload-and-download",4,{"id":112,"label":114,"slug":115},[171,175,179,183,184,185],{"id":172,"title":173,"slug":174},298,"Bento box","bento-grid",{"id":176,"title":177,"slug":178},260,"Badge","badge",{"id":180,"title":181,"slug":182},227,"Stepper","stepper",{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":187},[],{"uuid":189,"title":51,"description":190,"canonical_path":53,"image":191,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":192,"component_categories":205,"app":210},"d7df7646-69ce-4bc5-9a4c-a3924f1c7287","Detail page where a user views a shared community guide on how to upload and publish a portfolio via Playbook Profile.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd7df7646-69ce-4bc5-9a4c-a3924f1c7287.png",[193,195,197],{"id":148,"label":149,"slug":150,"rank":63,"group":194},{"id":152,"label":153,"slug":154},{"id":143,"label":144,"slug":145,"rank":103,"group":196},{"id":37,"label":65,"slug":66},{"id":198,"label":199,"slug":200,"rank":112,"group":201},118,"Help","help",{"id":202,"label":203,"slug":204},12,"States & Feedback","states-and-feedback",[206,207,208,209],{"id":180,"title":181,"slug":182},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":211},[],{"uuid":213,"title":51,"description":214,"canonical_path":53,"image":215,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":216,"component_categories":235,"app":240},"ff7da9fb-1a5b-4737-b660-d0abb1c4a739","Detail page for a community portfolio showcase entry where users can view the presentation, vote, and leave comments in a side panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fff7da9fb-1a5b-4737-b660-d0abb1c4a739.png",[217,222,224,228,233],{"id":218,"label":219,"slug":220,"rank":63,"group":221},83,"Post Detail","post-detail",{"id":37,"label":65,"slug":66},{"id":100,"label":101,"slug":102,"rank":103,"group":223},{"id":105,"label":106,"slug":107},{"id":202,"label":225,"slug":226,"rank":112,"group":227},"Favorite","favorite",{"id":112,"label":114,"slug":115},{"id":229,"label":230,"slug":231,"rank":120,"group":232},24,"Share","share",{"id":112,"label":114,"slug":115},{"id":143,"label":144,"slug":145,"rank":168,"group":234},{"id":37,"label":65,"slug":66},[236,237,238,239],{"id":180,"title":181,"slug":182},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":241},[],{"uuid":243,"title":244,"description":245,"canonical_path":53,"image":246,"width":54,"height":55,"image_alt":247,"kind":57,"patterns":248,"component_categories":253,"app":258},"623b5baa-330d-49a4-bd3a-937c67049ed2","Henry Trans public profile","Detail page where a user's public profile displays their location, social links, projects, and digital collectibles.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F623b5baa-330d-49a4-bd3a-937c67049ed2.png","Henry Trans public profile from Playbook",[249,251],{"id":120,"label":156,"slug":157,"rank":63,"group":250},{"id":105,"label":106,"slug":107},{"id":60,"label":61,"slug":62,"rank":103,"group":252},{"id":37,"label":65,"slug":66},[254,255,256,257],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":259},[],{"uuid":261,"title":51,"description":262,"canonical_path":53,"image":263,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":264,"component_categories":287,"app":291},"025f3188-433f-42ab-a1a8-b44c3ed4c143","Detail page where a user views a shared portfolio board and opens a side drawer to reference keyboard shortcuts and template information.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F025f3188-433f-42ab-a1a8-b44c3ed4c143.png",[265,267,274,279],{"id":143,"label":144,"slug":145,"rank":63,"group":266},{"id":37,"label":65,"slug":66},{"id":268,"label":269,"slug":270,"rank":103,"group":271},33,"AI Settings","ai-settings",{"id":120,"label":272,"slug":273},"AI","ai",{"id":275,"label":276,"slug":277,"rank":112,"group":278},119,"Info","info",{"id":202,"label":203,"slug":204},{"id":280,"label":281,"slug":282,"rank":120,"group":283},68,"Shortcuts","shortcuts",{"id":284,"label":285,"slug":286},6,"Navigation & Commands","navigation-and-commands",[288,289,290],{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":292},[],{"uuid":294,"title":295,"description":296,"canonical_path":53,"image":297,"width":54,"height":298,"image_alt":299,"kind":57,"patterns":300,"component_categories":313,"app":319},"61d29781-4630-432b-9e71-3af1a8691edc","Get featured today!","Feature page explaining how to upload, publish, and feature a portfolio on the Playbook Community using a step-by-step card grid.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F61d29781-4630-432b-9e71-3af1a8691edc.png",2131,"Get featured today! from Playbook",[301,309,311],{"id":302,"label":303,"slug":304,"rank":63,"group":305},74,"Onboarding Checklist","onboarding-checklist",{"id":306,"label":307,"slug":308},7,"Onboarding & Education","onboarding-and-education",{"id":60,"label":61,"slug":62,"rank":103,"group":310},{"id":37,"label":65,"slug":66},{"id":198,"label":199,"slug":200,"rank":112,"group":312},{"id":202,"label":203,"slug":204},[314,315,316,317,318],{"id":172,"title":173,"slug":174},{"id":176,"title":177,"slug":178},{"id":180,"title":181,"slug":182},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":320},[],{"uuid":322,"title":295,"description":323,"canonical_path":53,"image":324,"width":54,"height":55,"image_alt":299,"kind":57,"patterns":325,"component_categories":334,"app":341},"6e89fd38-8a28-4f10-8ff6-00d2385daa4a","Marketing page explaining how to upload and publish a portfolio to Playbook Profile in three simple steps.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6e89fd38-8a28-4f10-8ff6-00d2385daa4a.png",[326,328,330,332],{"id":160,"label":161,"slug":162,"rank":63,"group":327},{"id":112,"label":114,"slug":115},{"id":165,"label":166,"slug":167,"rank":103,"group":329},{"id":112,"label":114,"slug":115},{"id":302,"label":303,"slug":304,"rank":112,"group":331},{"id":306,"label":307,"slug":308},{"id":198,"label":199,"slug":200,"rank":120,"group":333},{"id":202,"label":203,"slug":204},[335,336,337,338,339,340],{"id":128,"title":129,"slug":130},{"id":172,"title":173,"slug":174},{"id":176,"title":177,"slug":178},{"id":180,"title":181,"slug":182},{"id":81,"title":82,"slug":83},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":342},[],{"uuid":344,"title":295,"description":345,"canonical_path":53,"image":346,"width":54,"height":55,"image_alt":299,"kind":57,"patterns":347,"component_categories":352,"app":358},"5c3f8709-723c-44df-b93c-f81033358549","Detail page where the user views a high-resolution image asset with bottom zoom controls and file metadata in a right-hand side panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5c3f8709-723c-44df-b93c-f81033358549.png",[348,350],{"id":143,"label":144,"slug":145,"rank":63,"group":349},{"id":37,"label":65,"slug":66},{"id":165,"label":166,"slug":167,"rank":103,"group":351},{"id":112,"label":114,"slug":115},[353,357],{"id":354,"title":355,"slug":356},223,"Slider","slider",{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":359},[],{"uuid":361,"title":295,"description":362,"canonical_path":53,"image":363,"width":54,"height":55,"image_alt":299,"kind":57,"patterns":364,"component_categories":369,"app":372},"01c3481f-01ea-42c6-85b8-4bda022233c6","Detail page where the user views a full-screen image asset with zoom controls and a sidebar displaying file metadata.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F01c3481f-01ea-42c6-85b8-4bda022233c6.png",[365,367],{"id":143,"label":144,"slug":145,"rank":63,"group":366},{"id":37,"label":65,"slug":66},{"id":165,"label":166,"slug":167,"rank":103,"group":368},{"id":112,"label":114,"slug":115},[370,371],{"id":354,"title":355,"slug":356},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":373},[],{"uuid":375,"title":295,"description":376,"canonical_path":53,"image":377,"width":54,"height":55,"image_alt":299,"kind":57,"patterns":378,"component_categories":381,"app":388},"8fc715ae-59a9-409b-a42d-334620428e48","Detail page where the user views a high-resolution image asset in a full-screen lightbox with zoom and gallery navigation controls.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8fc715ae-59a9-409b-a42d-334620428e48.png",[379],{"id":143,"label":144,"slug":145,"rank":63,"group":380},{"id":37,"label":65,"slug":66},[382,386,387],{"id":383,"title":384,"slug":385},277,"Button group","button-group",{"id":354,"title":355,"slug":356},{"id":85,"title":86,"slug":87},{"slug":89,"title":29,"logo":90,"categories":389},[],[],[392,394,396,398,400,402,404,406,408,410,412,414,416,419,422,425,428,431,434,436,440,444,448],{"label":144,"to":393},"\u002Fexamples\u002Fscreens\u002Fmedia-detail",{"label":61,"to":395},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":166,"to":397},"\u002Fexamples\u002Fscreens\u002Fupload-and-download",{"label":199,"to":399},"\u002Fexamples\u002Fscreens\u002Fhelp",{"label":101,"to":401},"\u002Fexamples\u002Fscreens\u002Fcomments",{"label":303,"to":403},"\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":156,"to":405},"\u002Fexamples\u002Fscreens\u002Fprofile",{"label":161,"to":407},"\u002Fexamples\u002Fscreens\u002Fpublish",{"label":269,"to":409},"\u002Fexamples\u002Fscreens\u002Fai-settings",{"label":225,"to":411},"\u002Fexamples\u002Fscreens\u002Ffavorite",{"label":118,"to":413},"\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":276,"to":415},"\u002Fexamples\u002Fscreens\u002Finfo",{"label":417,"to":418},"Playbook marketing pages","\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fmarketing",{"label":420,"to":421},"Playbook user flows","\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fflows",{"label":423,"to":424},"Playbook UI components","\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fcomponents",{"label":426,"to":427},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":429,"to":430},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":432,"to":433},"File sharing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffile-sharing",{"label":435,"to":18},"All SaaS app examples",{"label":437,"to":438,"description":439},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":441,"to":442,"description":443},"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":445,"to":446,"description":447},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":449,"to":450,"description":451},"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":453,"updated_at":454},"2023-03-14T12:30:08.000Z","2026-09-13T13:02:39.000Z"]