[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fsettings-panel":3},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":10,"seo":14,"breadcrumbs":18,"content":27,"examples":36,"showcases":254,"links":255,"dates":292},"\u002Fexamples\u002Fcomponents\u002Fsettings-panel","collection","components",true,{"example_count":9,"app_count":9},8,{"id":11,"title":12,"description":13},250,"Settings panel","See how interfaces group configuration controls in a dedicated panel. Explore how section labels, explanations, and individual settings fit around the item being configured.",{"title":15,"description":16,"og_image":17},"Settings panel UI examples - Nicelydone","Settings panel UI design examples from SaaS apps. See how interfaces group configuration controls in a dedicated panel. Explore how section labels,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faac575b9-c219-427d-8032-6358cd054ca0.jpg",[19,22,25],{"label":20,"to":21},"Examples","\u002Fexamples",{"label":23,"to":24},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":26,"to":4},"Settings panel UI examples",{"title":26,"eyebrow":28,"description":29,"sections":30,"body":34},"UI component category","Settings panel UI design examples from SaaS apps. See how interfaces group configuration controls in a dedicated panel. Explore how section labels, explanations, and individual settings fit around the item…",[31],{"title":32,"description":13,"links":33},"About Settings panel",[],[35],"8 UI components",[37,67,97,119,144,173,206,231],{"uuid":38,"title":39,"description":40,"canonical_path":41,"image":17,"width":42,"height":43,"image_alt":44,"kind":45,"categories":46,"app":49},"b17d41cb-d1a5-4d61-bfba-faf3b3095d48","Contents settings","Configures output formatting options like structured data, highlights, and full webpage text for search results","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents",1216,788,"Contents settings from Exa","component",[47],{"id":11,"title":12,"slug":48},"settings-panel",{"slug":50,"title":51,"logo":52,"baseline":53,"categories":54},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[55,59,63],{"id":56,"title":57,"slug":58},55,"Search engine","search-engine",{"id":60,"title":61,"slug":62},80,"Artificial Intelligence","artificial-intelligence",{"id":64,"title":65,"slug":66},37,"Developer APIs","developer-apis",{"uuid":68,"title":69,"description":70,"canonical_path":71,"image":72,"width":73,"height":74,"image_alt":75,"kind":45,"categories":76,"app":78},"90750c0d-699e-11f1-8c91-960002ce6e45","Team General Settings Card","Displays and edits core team profile fields including name, description, avatar, color, and auto-join options.","\u002Fexamples\u002Fapps\u002Ftown\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F97c9cbf3-e1a6-4108-8c73-bac05e06b709.jpg",2468,1492,"Team General Settings Card from Town",[77],{"id":11,"title":12,"slug":48},{"slug":79,"title":80,"logo":81,"baseline":82,"categories":83},"town","Town","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb6cf707d-df49-4190-b803-766b8914df89.png","The AI assistant that manages your inbox, schedules meetings, and handles busywork.",[84,85,89,93],{"id":60,"title":61,"slug":62},{"id":86,"title":87,"slug":88},30,"Productivity","productivity",{"id":90,"title":91,"slug":92},92,"Email","email",{"id":94,"title":95,"slug":96},101,"Calendar","calendar",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":45,"categories":106,"app":108},"de065256-7973-4da6-9aab-7c91c6e3144b","Grammarly UI component","A modal for setting voice preferences.","\u002Fexamples\u002Fapps\u002Fgrammarly\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5f08e4a3-8ea3-489d-99a2-f2dbda27c82f.png",980,1163,"UI component from Grammarly",[107],{"id":11,"title":12,"slug":48},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"grammarly","Grammarly","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgrammarly-bbef73ad.png","Free online writing assistant",[114,118],{"id":115,"title":116,"slug":117},59,"Writing tools","writing-tools",{"id":60,"title":61,"slug":62},{"uuid":120,"title":121,"description":122,"canonical_path":123,"image":124,"width":125,"height":126,"image_alt":127,"kind":45,"categories":128,"app":130},"dcead219-5090-4af2-9a4c-b0675868dcc9","Twenty UI component","A modal for creating a new view with options for view name and type.","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4278bc33-49c5-4958-bd6c-9102ceb72d4c.png",599,617,"UI component from Twenty",[129],{"id":11,"title":12,"slug":48},{"slug":131,"title":132,"logo":133,"baseline":134,"categories":135},"twenty","Twenty","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F958b58b6-f349-407c-8a71-bb683f68bcd2.png","The #1 Open-Source CRM",[136,140],{"id":137,"title":138,"slug":139},53,"CRM","crm",{"id":141,"title":142,"slug":143},45,"Open Source","open-source",{"uuid":145,"title":146,"description":147,"canonical_path":148,"image":149,"width":150,"height":151,"image_alt":152,"kind":45,"categories":153,"app":155},"6bf395a9-3715-4132-b7b6-a9e5398f5f5a","Fibery UI component","A modal for customizing form fields and style.","\u002Fexamples\u002Fapps\u002Ffibery\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb141e1f2-3309-44b3-8c19-478a07f3668f.png",573,1616,"UI component from Fibery",[154],{"id":11,"title":12,"slug":48},{"slug":156,"title":157,"logo":158,"baseline":159,"categories":160},"fibery","Fibery","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffibery-eb0f19ed.png","Build your own work & knowledge hub",[161,165,169],{"id":162,"title":163,"slug":164},22,"Knowledge Management","knowledge-management",{"id":166,"title":167,"slug":168},86,"Product management","product-management",{"id":170,"title":171,"slug":172},23,"Collaboration","collaboration",{"uuid":174,"title":175,"description":176,"canonical_path":177,"image":178,"width":179,"height":180,"image_alt":181,"kind":45,"categories":182,"app":184},"abf0ee03-e05a-4473-b49a-a8f7778fa8b8","Webflow UI component","A modal for element settings.","\u002Fexamples\u002Fapps\u002Fwebflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbd7e4607-957a-4310-8935-1ce56515b0af.png",608,1773,"UI component from Webflow",[183],{"id":11,"title":12,"slug":48},{"slug":185,"title":186,"logo":187,"baseline":188,"categories":189},"webflow","Webflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwebflow-d8c55605.png","Responsive web design tool, CMS, and hosting platform",[190,194,198,202,205],{"id":191,"title":192,"slug":193},96,"No code","no-code",{"id":195,"title":196,"slug":197},6,"Publishing","publishing",{"id":199,"title":200,"slug":201},7,"Web Development","web-development",{"id":9,"title":203,"slug":204},"Design","design",{"id":170,"title":171,"slug":172},{"uuid":207,"title":208,"description":209,"canonical_path":210,"image":211,"width":212,"height":213,"image_alt":214,"kind":45,"categories":215,"app":217},"a9a0789e-1f0c-43ad-a990-48361173e993","Luma UI component","A navigation bar with four buttons.","\u002Fexamples\u002Fapps\u002Fluma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F547789b1-5743-4abb-9a65-54af8cb83627.png",991,264,"UI component from Luma",[216],{"id":11,"title":12,"slug":48},{"slug":218,"title":219,"logo":220,"baseline":221,"categories":222},"luma","Luma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fluma-64c4b80f.png","Delightful events start here.",[223,227],{"id":224,"title":225,"slug":226},26,"Events","events",{"id":228,"title":229,"slug":230},4,"Ticketing","ticketing",{"uuid":232,"title":233,"description":234,"canonical_path":235,"image":236,"width":237,"height":238,"image_alt":239,"kind":45,"categories":240,"app":242},"beb406f6-740f-48aa-9cec-b6d75aed720f","Height UI component","A modal with filter options for a task management tool.","\u002Fexamples\u002Fapps\u002Fheight\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F95184404-61ef-482a-88ab-fe231fd1d610.png",1034,1088,"UI component from Height",[241],{"id":11,"title":12,"slug":48},{"slug":243,"title":244,"logo":245,"baseline":246,"categories":247},"height","Height","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fheight-29b426a4.png","Manage projects across engineering, product, design, and other teams",[248,249,253],{"id":166,"title":167,"slug":168},{"id":250,"title":251,"slug":252},29,"Task Management","task-management",{"id":86,"title":87,"slug":88},[],[256,259,262,265,268,271,274,277,280,283,286,289],{"label":257,"to":258},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":260,"to":261},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":263,"to":264},"Settings","\u002Fexamples\u002Fscreens\u002Fsettings",{"label":266,"to":267},"Table","\u002Fexamples\u002Fscreens\u002Ftable",{"label":269,"to":270},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":272,"to":273},"Town design examples","\u002Fexamples\u002Fapps\u002Ftown",{"label":275,"to":276},"Grammarly design examples","\u002Fexamples\u002Fapps\u002Fgrammarly",{"label":278,"to":279},"Twenty design examples","\u002Fexamples\u002Fapps\u002Ftwenty",{"label":281,"to":282},"Fibery design examples","\u002Fexamples\u002Fapps\u002Ffibery",{"label":284,"to":285},"Webflow design examples","\u002Fexamples\u002Fapps\u002Fwebflow",{"label":287,"to":288},"Luma design examples","\u002Fexamples\u002Fapps\u002Fluma",{"label":290,"to":291},"Height design examples","\u002Fexamples\u002Fapps\u002Fheight",{"published_at":293,"updated_at":294},"2022-08-22T18:03:00.000Z","2026-09-17T10:44:16.000Z"]