[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fbento-grid":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":318,"links":319,"dates":368},"\u002Fexamples\u002Fcomponents\u002Fbento-grid","collection","components",true,{"example_count":9,"app_count":10},287,149,{"id":12,"title":13,"description":14},298,"Bento box","Explore how websites arrange features in a grid of differently sized panels. Look at how text and imagery share each panel and how the layout establishes a reading order.",{"title":16,"description":17,"og_image":18},"Bento box UI examples - Nicelydone","Bento box UI design examples from SaaS apps. Explore how websites arrange features in a grid of differently sized panels. Look at how text and imagery share…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F01b23edd-0cd6-4ce9-adf9-68e7fc32a984.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Bento box UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Bento box UI design examples from SaaS apps. Explore how websites arrange features in a grid of differently sized panels. Look at how text and imagery share each panel and how the layout establishes a…",[32],{"title":33,"description":14,"links":34},"About Bento box",[],[36],"287 UI components",[38,68,95,119,140,167,191,217,235,260,280,301],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"bb550f0b-42c3-433c-a1d9-4b877a7f93f6","Alloy UI component","A product marketing page showcasing features for building ideas, previewing changes, and sharing links, with examples of collaboration messages and code management.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",2304,1885,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"bento-grid",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"13bed4f6-69d1-4b51-9bb7-333cad4f337c","Inference UI component","A dashboard or landing page showcasing features for serving, monitoring, deploying, training, and evaluating AI models.","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F733386be-52d8-47dd-9883-be48b4fb1743.png",2760,2721,"UI component from Inference",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[85,86,90,94],{"id":57,"title":58,"slug":59},{"id":87,"title":88,"slug":89},16,"Monitoring","monitoring",{"id":91,"title":92,"slug":93},37,"Developer APIs","developer-apis",{"id":61,"title":62,"slug":63},{"uuid":96,"title":97,"description":98,"canonical_path":99,"image":100,"width":101,"height":102,"image_alt":103,"kind":46,"categories":104,"app":106},"cf59e327-aafe-41e1-81fc-cf28d85e0dfc","Steel UI component","A product page showcasing the features of a \"Sessions API\" for browser automation and security, presented in a grid layout.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa608729c-71aa-47c6-bebc-1d6fe8e4e772.png",2492,2786,"UI component from Steel",[105],{"id":12,"title":13,"slug":49},{"slug":107,"title":108,"logo":109,"baseline":110,"categories":111},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[112,113,114,115],{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":91,"title":92,"slug":93},{"id":116,"title":117,"slug":118},45,"Open Source","open-source",{"uuid":120,"title":121,"description":122,"canonical_path":123,"image":124,"width":125,"height":126,"image_alt":127,"kind":46,"categories":128,"app":130},"ccc3f126-7e49-420e-979c-30c73c18782a","Riverside UI component","A landing page showcasing features of an AI-powered video editor, including transcript-based editing, separate speaker tracks, and tools for improving conversation flow.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff52634cc-3290-4e34-9bef-a59ee56dfde5.png",2816,3156,"UI component from Riverside",[129],{"id":12,"title":13,"slug":49},{"slug":131,"title":132,"logo":133,"baseline":134,"categories":135},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[136],{"id":137,"title":138,"slug":139},100,"Video","video",{"uuid":141,"title":142,"description":143,"canonical_path":144,"image":145,"width":146,"height":147,"image_alt":148,"kind":46,"categories":149,"app":151},"eef9bbdd-09d6-48a7-9303-36314094de14","Axiom UI component","A technical overview page showcasing various features of a data processing and analytics platform with code examples, data visualizations, and conceptual diagrams.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F80be2ca2-83a6-452a-87c2-b5456bb2eb18.png",2800,3960,"UI component from Axiom",[150],{"id":12,"title":13,"slug":49},{"slug":152,"title":153,"logo":154,"baseline":155,"categories":156},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[157,161,165,166],{"id":158,"title":159,"slug":160},46,"Analytics","analytics",{"id":162,"title":163,"slug":164},57,"Big data","big-data",{"id":87,"title":88,"slug":89},{"id":57,"title":58,"slug":59},{"uuid":168,"title":169,"description":170,"canonical_path":171,"image":172,"width":173,"height":174,"image_alt":175,"kind":46,"categories":176,"app":178},"aadc129c-9dba-4e39-819f-91f0de6b9cd6","Extend UI component","A product features page detailing a document processing toolkit with sections on confidence scoring, fast mode, agent-based processing, document workflows, and evaluation tools, using text, illustrations, and data visualizations.","\u002Fexamples\u002Fapps\u002Fextend\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8271241a-1b2b-4b32-9846-fdaaa2b29487.png",2592,3575,"UI component from Extend",[177],{"id":12,"title":13,"slug":49},{"slug":179,"title":180,"logo":181,"baseline":182,"categories":183},"extend","Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[184,188,189,190],{"id":185,"title":186,"slug":187},77,"Machine learning","machine-learning",{"id":61,"title":62,"slug":63},{"id":91,"title":92,"slug":93},{"id":57,"title":58,"slug":59},{"uuid":192,"title":193,"description":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"9ae311b3-9b36-4120-9e52-b246aec4e0a8","Lithic UI component","A section showcasing a company's reliability, security, and partnerships through various trust signals and logos.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2327d696-6d64-4973-9596-e481c97ef17d.png",2624,1184,"UI component from Lithic",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[208,212,216],{"id":209,"title":210,"slug":211},36,"Finance","finance",{"id":213,"title":214,"slug":215},39,"Payments","payments",{"id":91,"title":92,"slug":93},{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":223,"height":224,"image_alt":225,"kind":46,"categories":226,"app":228},"958e619f-dfcc-48e6-a81c-f85dd0c85b6c","Visitors UI component","A web interface displaying visitor analytics, including history, breakdown, and user journeys, with a focus on conversion tracking.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd80765d-015f-4d41-8065-62a2cd7b6cdb.png",2224,2952,"UI component from Visitors",[227],{"id":12,"title":13,"slug":49},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[234],{"id":158,"title":159,"slug":160},{"uuid":236,"title":237,"description":238,"canonical_path":239,"image":240,"width":241,"height":242,"image_alt":243,"kind":46,"categories":244,"app":246},"38aadb03-3199-4a66-b684-52bf7bd2f15d","Dock UI component","A clean and modern web interface showcasing features of a project management and client collaboration platform, including task lists, timelines, and notifications.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8602421a-ad5e-44dc-ba42-0940b1f29464.png",2608,2679,"UI component from Dock",[245],{"id":12,"title":13,"slug":49},{"slug":247,"title":248,"logo":249,"baseline":250,"categories":251},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[252,256],{"id":253,"title":254,"slug":255},23,"Collaboration","collaboration",{"id":257,"title":258,"slug":259},29,"Task Management","task-management",{"uuid":261,"title":262,"description":263,"canonical_path":264,"image":265,"width":266,"height":267,"image_alt":268,"kind":46,"categories":269,"app":271},"f021ed50-4922-4f85-819a-d3863d7dd4d7","Appwrite UI component","A dashboard displaying various security settings and user session information, including multi-factor authentication, password security, and session limits.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3ef53691-f203-4ab4-8f8a-38196367760c.png",2576,2528,"UI component from Appwrite",[270],{"id":12,"title":13,"slug":49},{"slug":272,"title":273,"logo":274,"baseline":275,"categories":276},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[277,278,279],{"id":57,"title":58,"slug":59},{"id":91,"title":92,"slug":93},{"id":116,"title":117,"slug":118},{"uuid":281,"title":282,"description":283,"canonical_path":284,"image":285,"width":43,"height":286,"image_alt":287,"kind":46,"categories":288,"app":290},"848b5caf-a765-41a8-b4d7-cf3f837da1d2","Feature showcase grid","Displays multiple interactive feature cards highlighting wallet actions, security states, and transaction tracking on a marketing landing page","\u002Fexamples\u002Fapps\u002Ffamily\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fee2268b6-461c-4133-9559-ba65a9fb43d4.png",1528,"Feature showcase grid from Family",[289],{"id":12,"title":13,"slug":49},{"slug":291,"title":292,"logo":293,"baseline":294,"categories":295},"family","Family","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F54b399c5-e1bc-4b2d-9748-6c66246cee2b.png","Your favorite crypto wallet.",[296,297],{"id":209,"title":210,"slug":211},{"id":298,"title":299,"slug":300},95,"Blockchain","blockchain",{"uuid":302,"title":282,"description":303,"canonical_path":304,"image":305,"width":306,"height":307,"image_alt":308,"kind":46,"categories":309,"app":311},"e4a5ac6d-031f-45d2-9ee2-66edf39856c8","Displays key product capabilities through app UI mockups on the marketing landing page","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F75cad63c-7482-48b3-92d7-d73bb341b5a9.png",2882,2079,"Feature showcase grid from Copilot",[310],{"id":12,"title":13,"slug":49},{"slug":312,"title":313,"logo":314,"baseline":315,"categories":316},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[317],{"id":209,"title":210,"slug":211},[],[320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365],{"label":321,"to":322},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":324,"to":325},"Feature Page","\u002Fexamples\u002Fpages\u002Ffeature-page",{"label":327,"to":328},"Product Page","\u002Fexamples\u002Fpages\u002Fproduct-page",{"label":330,"to":331},"Developer Portal","\u002Fexamples\u002Fpages\u002Fdeveloper-portal",{"label":333,"to":334},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":336,"to":337},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":339,"to":340},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":342,"to":343},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":345,"to":346},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":348,"to":349},"Extend design examples","\u002Fexamples\u002Fapps\u002Fextend",{"label":351,"to":352},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":354,"to":355},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":357,"to":358},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":360,"to":361},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":363,"to":364},"Family design examples","\u002Fexamples\u002Fapps\u002Ffamily",{"label":366,"to":367},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"published_at":369,"updated_at":370},"2023-06-30T11:05:06.000Z","2026-09-17T10:44:16.000Z"]