[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":207,"links":208,"dates":245},"\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Playbook UI components examples - Nicelydone","Browse Playbook UI component design examples. Preview individual interface elements and explore related component categories. Make your creative work…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f1b637c-2657-453e-80e9-9baa1123fc64.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 UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Playbook UI component design examples. Preview individual interface elements and explore related component categories. Make your creative work beauuutiful",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Playbook","playbook-hq","Make your creative work beauuutiful","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fplaybook-gp89hhmz.png","https:\u002F\u002Fwww.playbook.com","playbook_hq",[37,41,45],{"id":38,"title":39,"slug":40},8,"Design","design",{"id":42,"title":43,"slug":44},23,"Collaboration","collaboration",{"id":46,"title":47,"slug":48},71,"File sharing","file-sharing",[50,65,80,95,107,119,129,141,153,165,177,192],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"3f1b637c-2657-453e-80e9-9baa1123fc64","Zoom slider","A horizontal slider control with minus and plus icons on either side, used for adjusting zoom levels.",772,208,"Zoom slider from Playbook","component",[59],{"id":60,"title":61,"slug":62},223,"Slider","slider",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":70,"height":71,"image_alt":72,"kind":57,"categories":73,"app":78},"5dca0052-2eaf-461e-95bb-d43e18d438ac","Profile Link Row","A horizontal layout featuring a circular avatar alongside a user's name and a link to view their profile.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5dca0052-2eaf-461e-95bb-d43e18d438ac.png",453,196,"Profile Link Row from Playbook",[74],{"id":75,"title":76,"slug":77},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":79},[],{"uuid":81,"title":82,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":87,"kind":57,"categories":88,"app":93},"5dd571bc-77a7-436b-83dd-0a55e9db1eb2","Feature Illustration","An illustration showing a stack of identical images with a success toast indicating that duplicates have been merged.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5dd571bc-77a7-436b-83dd-0a55e9db1eb2.png",1422,1036,"Feature Illustration from Playbook",[89],{"id":90,"title":91,"slug":92},278,"Illustration","illustration",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":97,"description":98,"canonical_path":4,"image":99,"width":100,"height":101,"image_alt":102,"kind":57,"categories":103,"app":105},"461aeaee-d6c3-4671-b032-c103e852c65a","Licenses management view","A view displaying license management details, including a summary of purchases and sent licenses, followed by a detailed table of purchased assets. The table includes columns for Assets, Board, Expiring, and Usage, with the first row showing an expired license and subsequent rows displaying skeleton loading states.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F461aeaee-d6c3-4671-b032-c103e852c65a.png",1437,1093,"Licenses management view from Playbook",[104],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":106},[],{"uuid":108,"title":109,"description":110,"canonical_path":4,"image":111,"width":112,"height":113,"image_alt":114,"kind":57,"categories":115,"app":117},"8be12c07-67f2-4712-b7bd-6939aed8c2e4","Playbook UI component","A simple chat interface with two options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8be12c07-67f2-4712-b7bd-6939aed8c2e4.png",1420,1059,"UI component from Playbook",[116],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":118},[],{"uuid":120,"title":109,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":114,"kind":57,"categories":125,"app":127},"f45fcced-54c6-42da-b84c-9dc3f2489e7f","File sharing modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff45fcced-54c6-42da-b84c-9dc3f2489e7f.png",1540,1156,[126],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":128},[],{"uuid":130,"title":131,"description":132,"canonical_path":4,"image":133,"width":134,"height":135,"image_alt":136,"kind":57,"categories":137,"app":139},"8d1ac24f-2f72-4186-8aab-e3b8b23df7e4","Cross-platform UI mockup","A stylized illustration showing a desktop web interface and a mobile app interface side-by-side. The desktop view shows a sidebar with navigation and a main area with a masonry grid of images. The mobile view shows a dark login screen with a thumbs-up icon and authentication buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d1ac24f-2f72-4186-8aab-e3b8b23df7e4.png",1424,1118,"Cross-platform UI mockup from Playbook",[138],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":57,"categories":149,"app":151},"91b04718-1913-4eb4-a058-cf2d74da4684","Collaboration illustration","An illustration showing a stylized UI mockup of a commenting feature. It features a central image with a comment pin, a floating comment card, and a sidebar listing comments.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F91b04718-1913-4eb4-a058-cf2d74da4684.png",1586,1274,"Collaboration illustration from Playbook",[150],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":152},[],{"uuid":154,"title":155,"description":156,"canonical_path":4,"image":157,"width":158,"height":159,"image_alt":160,"kind":57,"categories":161,"app":163},"9fb70e21-b218-48ff-8bce-4b71f2eec478","Feature illustration","A stylized illustration showing overlapping UI elements: an image upload progress indicator, a gallery template preview, and a publish settings card.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9fb70e21-b218-48ff-8bce-4b71f2eec478.png",1232,1041,"Feature illustration from Playbook",[162],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":164},[],{"uuid":166,"title":167,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":172,"kind":57,"categories":173,"app":175},"abc4db74-9ce0-4501-be76-c505169d81c4","Asset grid","A masonry-style grid displaying various file types including images, a color swatch, and a link, with file format badges overlaid.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fabc4db74-9ce0-4501-be76-c505169d81c4.png",1456,1183,"Asset grid from Playbook",[174],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":176},[],{"uuid":178,"title":179,"description":180,"canonical_path":4,"image":181,"width":182,"height":183,"image_alt":184,"kind":57,"categories":185,"app":190},"4a55688d-5506-446f-b060-fe193b6677d3","Feature Benefit List","A list of features or benefits presented with checkmark icons, typically used to highlight the value of a product or plan.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4a55688d-5506-446f-b060-fe193b6677d3.png",688,778,"Feature Benefit List from Playbook",[186],{"id":187,"title":188,"slug":189},172,"Benefit List","benefit-list",{"slug":31,"title":30,"logo":33,"categories":191},[],{"uuid":193,"title":194,"description":195,"canonical_path":4,"image":196,"width":197,"height":198,"image_alt":199,"kind":57,"categories":200,"app":205},"c60944d4-78d3-41de-8ceb-0464aa038c69","FAQ Grid","A grid of frequently asked questions and answers displayed in a three-column layout.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc60944d4-78d3-41de-8ceb-0464aa038c69.png",2559,2704,"FAQ Grid from Playbook",[201],{"id":202,"title":203,"slug":204},189,"FAQ","faq",{"slug":31,"title":30,"logo":33,"categories":206},[],[],[209,212,215,218,221,224,227,229,233,237,241],{"label":210,"to":211},"Playbook product screens","\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fscreens",{"label":213,"to":214},"Playbook marketing pages","\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fmarketing",{"label":216,"to":217},"Playbook user flows","\u002Fexamples\u002Fapps\u002Fplaybook-hq\u002Fflows",{"label":219,"to":220},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":222,"to":223},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":225,"to":226},"File sharing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffile-sharing",{"label":228,"to":18},"All SaaS app examples",{"label":230,"to":231,"description":232},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":234,"to":235,"description":236},"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":238,"to":239,"description":240},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":242,"to":243,"description":244},"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":246,"updated_at":247},"2023-03-14T12:30:08.000Z","2026-09-13T13:02:39.000Z"]