[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Ftheme-settings":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":331,"links":332,"dates":381},"\u002Fexamples\u002Fcomponents\u002Ftheme-settings","collection","components",true,{"example_count":9,"app_count":10},166,94,{"id":12,"title":13,"description":14},256,"Theme settings","See how interfaces present appearance choices. Explore how theme previews, color options, and selection states communicate changes to the look of the product.",{"title":16,"description":17,"og_image":18},"Theme settings UI examples - Nicelydone","Theme settings UI design examples from SaaS apps. See how interfaces present appearance choices. Explore how theme previews, color options, and selection…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5807d493-6db5-48d0-abf7-2418db6e64b8.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Theme settings UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Theme settings UI design examples from SaaS apps. See how interfaces present appearance choices. Explore how theme previews, color options, and selection states communicate changes to the look of the product.",[32],{"title":33,"description":14,"links":34},"About Theme settings",[],[36],"166 UI components",[38,68,97,120,143,164,185,204,231,257,286,308],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"1feaa2ca-8de5-44dd-91f7-222fbdf5c6c1","Appwrite UI component","A user profile dropdown menu displaying account details, sign out option, and a theme selection toggle.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents",545,505,"UI component from Appwrite","component",[48],{"id":12,"title":13,"slug":49},"theme-settings",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"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.",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},37,"Developer APIs","developer-apis",{"id":65,"title":66,"slug":67},45,"Open Source","open-source",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"54933fea-2bab-41f5-8a9a-d46db9020562","Lovable UI component","A user interface displaying application settings with options for appearance, including background and theme selection.","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3ff1e10b-8d31-4fee-88b2-583c2ea9c37e.png",953,670,"UI component from Lovable",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[85,89,93],{"id":86,"title":87,"slug":88},80,"Artificial Intelligence","artificial-intelligence",{"id":90,"title":91,"slug":92},7,"Web Development","web-development",{"id":94,"title":95,"slug":96},96,"No code","no-code",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"53fd830f-ef37-409c-964c-985626f4186a","Liveblocks UI component","A user account dropdown menu displaying personal settings, theme selection, and external links, with a nested menu for theme options.","\u002Fexamples\u002Fapps\u002Fliveblocks\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2736f8e6-fdf3-48c0-b23e-8cddadeec7bb.png",737,739,"UI component from Liveblocks",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"liveblocks","Liveblocks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F081e178d-2cab-4e0b-93f8-061e021783fa.png","Build amazing real‑time collaborative products",[114,115,119],{"id":57,"title":58,"slug":59},{"id":116,"title":117,"slug":118},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},{"uuid":121,"title":122,"description":123,"canonical_path":124,"image":125,"width":126,"height":127,"image_alt":128,"kind":46,"categories":129,"app":131},"b9cf134d-cb69-4490-b16a-5be76e163c27","Documentation.AI UI component","A settings page for documentation branding and theme, showcasing two template options: Classic and Atlas, with a selected state for the Classic template.","\u002Fexamples\u002Fapps\u002Fdocumentationai\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F55603ae8-abd9-4e32-87dd-175f6c68fea4.png",2061,915,"UI component from Documentation.AI",[130],{"id":12,"title":13,"slug":49},{"slug":132,"title":133,"logo":134,"baseline":135,"categories":136},"documentationai","Documentation.AI","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F765c5eca-9754-4c48-be93-ec4d07f943f7.png","AI Documentation & Knowledge",[137,141,142],{"id":138,"title":139,"slug":140},22,"Knowledge Management","knowledge-management",{"id":57,"title":58,"slug":59},{"id":86,"title":87,"slug":88},{"uuid":144,"title":145,"description":146,"canonical_path":147,"image":148,"width":149,"height":150,"image_alt":151,"kind":46,"categories":152,"app":154},"364ca292-f40f-41bb-b48a-b530742d688e","Pocket Casts UI component","User interface for theme selection","\u002Fexamples\u002Fapps\u002Fpocket-casts\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F91c42afd-3d01-4e3e-ad42-c56940d5d72c.png",754,266,"UI component from Pocket Casts",[153],{"id":12,"title":13,"slug":49},{"slug":155,"title":156,"logo":157,"baseline":158,"categories":159},"pocket-casts","Pocket Casts","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ff4d1fda4-3822-47c0-a321-da4fe83db7b8.png","Listen to podcasts with the best free podcasting app",[160],{"id":161,"title":162,"slug":163},15,"Media and Entertainment","media-and-entertainment",{"uuid":165,"title":166,"description":167,"canonical_path":168,"image":169,"width":170,"height":171,"image_alt":172,"kind":46,"categories":173,"app":175},"1a4a9a62-f9e6-4bc4-a9fb-6316142eff64","Mixpanel UI component","A user interface for selecting and managing color themes, featuring a search bar, a new theme button, and a list of predefined color palettes.","\u002Fexamples\u002Fapps\u002Fmixpanel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F561f2dc6-5fd6-4843-ba7b-a1ba181fb573.png",750,1345,"UI component from Mixpanel",[174],{"id":12,"title":13,"slug":49},{"slug":176,"title":177,"logo":178,"baseline":179,"categories":180},"mixpanel","Mixpanel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6591e7aa-86c8-4da2-8c52-c70f46a86bbb.png","Product analytics for mobile, web, & more",[181],{"id":182,"title":183,"slug":184},46,"Analytics","analytics",{"uuid":186,"title":187,"description":188,"canonical_path":189,"image":190,"width":191,"height":192,"image_alt":193,"kind":46,"categories":194,"app":196},"567da0c7-55fb-4be0-89f2-f6bd44a18edb","Ona UI component","A dropdown menu displaying appearance settings with options for system, dark, and light themes.","\u002Fexamples\u002Fapps\u002Fona\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe892bfb3-77d3-43d8-880c-304af033fa21.png",1436,583,"UI component from Ona",[195],{"id":12,"title":13,"slug":49},{"slug":197,"title":198,"logo":199,"baseline":200,"categories":201},"ona","Ona","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5f04e4d2-1820-448d-8510-4d55ff185524.png","The AI software engineer you can rely on",[202,203],{"id":57,"title":58,"slug":59},{"id":86,"title":87,"slug":88},{"uuid":205,"title":206,"description":207,"canonical_path":208,"image":209,"width":210,"height":211,"image_alt":212,"kind":46,"categories":213,"app":215},"4bfe13fa-24d0-45ca-9ee2-a0c744cd8a54","Fabric UI component","A user interface element for selecting a display theme","\u002Fexamples\u002Fapps\u002Ffabric\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffa46d6a4-4344-49de-8a94-e2fc646fb3ac.png",1956,840,"UI component from Fabric",[214],{"id":12,"title":13,"slug":49},{"slug":216,"title":217,"logo":218,"baseline":219,"categories":220},"fabric","Fabric","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F42ed2d48-9d22-43a8-a445-db7acd80254b.png","Your second brain. Remember everything",[221,222,226,230],{"id":138,"title":139,"slug":140},{"id":223,"title":224,"slug":225},30,"Productivity","productivity",{"id":227,"title":228,"slug":229},71,"File sharing","file-sharing",{"id":86,"title":87,"slug":88},{"uuid":232,"title":233,"description":234,"canonical_path":235,"image":236,"width":237,"height":238,"image_alt":239,"kind":46,"categories":240,"app":242},"f3561c41-4c46-4566-af51-ba53505e9bdd","Reve UI component","A settings interface displaying options for appearance mode and model training.","\u002Fexamples\u002Fapps\u002Freve\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8a4f3bfa-ad3e-4977-82d6-64150ce75ed7.png",1470,574,"UI component from Reve",[241],{"id":12,"title":13,"slug":49},{"slug":243,"title":244,"logo":245,"baseline":246,"categories":247},"reve","Reve","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faa7de5bf-1b6b-406e-a3b2-de7db20d6531.png","Reimagine Reality",[248,252,253],{"id":249,"title":250,"slug":251},38,"Art","art",{"id":86,"title":87,"slug":88},{"id":254,"title":255,"slug":256},8,"Design","design",{"uuid":258,"title":259,"description":260,"canonical_path":261,"image":262,"width":263,"height":264,"image_alt":265,"kind":46,"categories":266,"app":268},"be1ca27c-e6ec-440d-8fa2-42a6d8502ede","Livekit UI component","A user interface element for selecting the display theme, offering light, dark, and system options.","\u002Fexamples\u002Fapps\u002Flivekit\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F390e99fb-d4f3-4164-bc33-9beecc63f044.png",435,181,"UI component from Livekit",[267],{"id":12,"title":13,"slug":49},{"slug":269,"title":270,"logo":271,"baseline":272,"categories":273},"livekit","Livekit","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fe61f12ad-e18b-4b1e-91fb-39d0e1ce98ce.png","Build voice, video, and physical AI",[274,275,276,277,278,282],{"id":86,"title":87,"slug":88},{"id":61,"title":62,"slug":63},{"id":65,"title":66,"slug":67},{"id":57,"title":58,"slug":59},{"id":279,"title":280,"slug":281},70,"Video streaming","video-streaming",{"id":283,"title":284,"slug":285},100,"Video","video",{"uuid":287,"title":288,"description":289,"canonical_path":290,"image":291,"width":292,"height":293,"image_alt":294,"kind":46,"categories":295,"app":297},"2e340521-7817-4bde-a51e-549bafc5e681","Attio UI component","Theme selection modal","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4ac1bce7-ac50-48c9-868c-addc32317928.png",1683,665,"UI component from Attio",[296],{"id":12,"title":13,"slug":49},{"slug":298,"title":299,"logo":300,"baseline":301,"categories":302},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[303,307],{"id":304,"title":305,"slug":306},53,"CRM","crm",{"id":86,"title":87,"slug":88},{"uuid":309,"title":310,"description":311,"canonical_path":312,"image":313,"width":314,"height":315,"image_alt":316,"kind":46,"categories":317,"app":319},"b812c89a-7381-4ce4-a96a-15f5fbf1c319","Cofounder UI component","The screenshot shows appearance settings with options for theme and shadows.","\u002Fexamples\u002Fapps\u002Fcofounder\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6108c582-0931-4ac2-8dea-15babe4ed434.png",1279,546,"UI component from Cofounder",[318],{"id":12,"title":13,"slug":49},{"slug":320,"title":321,"logo":322,"baseline":323,"categories":324},"cofounder","Cofounder","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F4cc93e65-72a6-45c1-b609-72d100b8934a.png","Automate your life with natural language",[325,326,327],{"id":86,"title":87,"slug":88},{"id":223,"title":224,"slug":225},{"id":328,"title":329,"slug":330},105,"Workflow Automation","workflow-automation",[],[333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378],{"label":334,"to":335},"Account Settings","\u002Fexamples\u002Fscreens\u002Faccount-settings",{"label":337,"to":338},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":340,"to":341},"Settings","\u002Fexamples\u002Fscreens\u002Fsettings",{"label":343,"to":344},"AI Assistant","\u002Fexamples\u002Fscreens\u002Fai-assistant",{"label":346,"to":347},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":349,"to":350},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":352,"to":353},"Liveblocks design examples","\u002Fexamples\u002Fapps\u002Fliveblocks",{"label":355,"to":356},"Documentation.AI design examples","\u002Fexamples\u002Fapps\u002Fdocumentationai",{"label":358,"to":359},"Pocket Casts design examples","\u002Fexamples\u002Fapps\u002Fpocket-casts",{"label":361,"to":362},"Mixpanel design examples","\u002Fexamples\u002Fapps\u002Fmixpanel",{"label":364,"to":365},"Ona design examples","\u002Fexamples\u002Fapps\u002Fona",{"label":367,"to":368},"Fabric design examples","\u002Fexamples\u002Fapps\u002Ffabric",{"label":370,"to":371},"Reve design examples","\u002Fexamples\u002Fapps\u002Freve",{"label":373,"to":374},"Livekit design examples","\u002Fexamples\u002Fapps\u002Flivekit",{"label":376,"to":377},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":379,"to":380},"Cofounder design examples","\u002Fexamples\u002Fapps\u002Fcofounder",{"published_at":382,"updated_at":383},"2022-08-23T13:12:21.000Z","2026-09-17T10:44:16.000Z"]