[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fsegmented-control":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":325,"links":326,"dates":372},"\u002Fexamples\u002Fcomponents\u002Fsegmented-control","collection","components",true,{"example_count":9,"app_count":10},133,94,{"id":12,"title":13,"description":14},218,"Segmented control","Explore how interfaces present a small set of related choices side by side. Look at how labels and selected states distinguish the active option within the group.",{"title":16,"description":17,"og_image":18},"Segmented control UI examples - Nicelydone","Segmented control UI design examples from SaaS apps. Explore how interfaces present a small set of related choices side by side. Look at how labels and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F45b62ff9-7cec-4b44-aa77-19dbf7a9e1ba.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Segmented control UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Segmented control UI design examples from SaaS apps. Explore how interfaces present a small set of related choices side by side. Look at how labels and selected states distinguish the active option within the…",[32],{"title":33,"description":14,"links":34},"About Segmented control",[],[36],"133 UI components",[38,68,101,131,158,180,210,230,249,272,299],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"9798ce9b-1705-4758-a010-2edea57ae843","Alloy UI component","A horizontal segment control with four icons, one of which is selected.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",434,196,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"segmented-control",{"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},"d5f27577-f8bb-40e3-b920-2730ef501e3a","Airbnb UI component","A user interface segment for selecting a type of place.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4fb6986e-cfa4-4a0e-a392-bfeea10cfc6b.png",1302,446,"UI component from Airbnb",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[85,89,93,97],{"id":86,"title":87,"slug":88},5,"Travel","travel",{"id":90,"title":91,"slug":92},12,"Hospitality","hospitality",{"id":94,"title":95,"slug":96},17,"Peer to peer","peer-to-peer",{"id":98,"title":99,"slug":100},18,"Marketplace","marketplace",{"uuid":102,"title":103,"description":104,"canonical_path":105,"image":106,"width":107,"height":108,"image_alt":109,"kind":46,"categories":110,"app":112},"bd4cc12a-ff51-47f4-b54b-68b1ef34e5f9","Zaro UI component","A segmented control allowing users to switch between 'Workspace Apps' and 'My Apps', with 'Workspace Apps' currently selected.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F65396835-9da0-4105-b41d-5c05e056fc3b.png",611,201,"UI component from Zaro",[111],{"id":12,"title":13,"slug":49},{"slug":113,"title":114,"logo":115,"baseline":116,"categories":117},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[118,122,123,127],{"id":119,"title":120,"slug":121},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},{"id":124,"title":125,"slug":126},22,"Knowledge Management","knowledge-management",{"id":128,"title":129,"slug":130},46,"Analytics","analytics",{"uuid":132,"title":133,"description":134,"canonical_path":135,"image":136,"width":137,"height":138,"image_alt":139,"kind":46,"categories":140,"app":142},"da09ed87-5144-438a-b2aa-51c3ab1017e5","Extend UI component","A horizontal row of icon-labeled buttons representing different document processing actions or features.","\u002Fexamples\u002Fapps\u002Fextend\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa86ce1ef-f2cb-42c8-93fc-b7533875a4f1.png",1030,182,"UI component from Extend",[141],{"id":12,"title":13,"slug":49},{"slug":143,"title":144,"logo":145,"baseline":146,"categories":147},"extend","Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[148,152,153,157],{"id":149,"title":150,"slug":151},77,"Machine learning","machine-learning",{"id":61,"title":62,"slug":63},{"id":154,"title":155,"slug":156},37,"Developer APIs","developer-apis",{"id":57,"title":58,"slug":59},{"uuid":159,"title":160,"description":161,"canonical_path":162,"image":163,"width":164,"height":165,"image_alt":166,"kind":46,"categories":167,"app":169},"956b695d-70f9-4f46-9d07-acc7248e8368","Dock UI component","A segmented control with three options, 'Workspace' is selected.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb19bfc53-e70c-4fa6-84fc-6c30c0b955fb.png",882,195,"UI component from Dock",[168],{"id":12,"title":13,"slug":49},{"slug":170,"title":171,"logo":172,"baseline":173,"categories":174},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[175,176],{"id":119,"title":120,"slug":121},{"id":177,"title":178,"slug":179},29,"Task Management","task-management",{"uuid":181,"title":182,"description":183,"canonical_path":184,"image":185,"width":186,"height":187,"image_alt":188,"kind":46,"categories":189,"app":191},"1e7a0149-08e4-43a0-86f8-97e8897e24d7","Bloom UI component","A segmented control with two options, 'Production' and 'Development', where 'Production' is selected.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1dd1f368-58c7-4715-8512-19b7e8087246.png",820,207,"UI component from Bloom",[190],{"id":12,"title":13,"slug":49},{"slug":192,"title":193,"logo":194,"baseline":195,"categories":196},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[197,198,202,206],{"id":61,"title":62,"slug":63},{"id":199,"title":200,"slug":201},3,"Shopping","shopping",{"id":203,"title":204,"slug":205},7,"Web Development","web-development",{"id":207,"title":208,"slug":209},96,"No code","no-code",{"uuid":211,"title":212,"description":213,"canonical_path":214,"image":215,"width":216,"height":217,"image_alt":218,"kind":46,"categories":219,"app":221},"6bf30e1e-a91d-4f86-be82-845ad230f345","Lovable UI component","A user interface section for managing people within a workspace, featuring a title, descriptive text, and a segmented control for navigation.","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faa738afd-e4f4-4d33-80e6-b30b55f447cf.png",1853,477,"UI component from Lovable",[220],{"id":12,"title":13,"slug":49},{"slug":222,"title":223,"logo":224,"baseline":225,"categories":226},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[227,228,229],{"id":61,"title":62,"slug":63},{"id":203,"title":204,"slug":205},{"id":207,"title":208,"slug":209},{"uuid":231,"title":232,"description":233,"canonical_path":234,"image":235,"width":236,"height":237,"image_alt":238,"kind":46,"categories":239,"app":241},"4d4935de-927c-41e1-91e0-a64f2a7d3b22","Elevenlabs UI component","A popover displaying prompt strength settings with a segmented control for selection.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd4010e37-0ca8-42de-8eaa-c71927461e13.png",857,643,"UI component from Elevenlabs",[240],{"id":12,"title":13,"slug":49},{"slug":242,"title":243,"logo":244,"baseline":245,"categories":246},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[247,248],{"id":61,"title":62,"slug":63},{"id":154,"title":155,"slug":156},{"uuid":250,"title":251,"description":252,"canonical_path":253,"image":254,"width":255,"height":256,"image_alt":257,"kind":46,"categories":258,"app":260},"560e9cc1-14ce-4363-abda-0555d3fc7216","Paper UI component","A segmented control with two options, 'Contain' and 'Cover', under a 'Fit' label.","\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22f7ed3f-117d-4faf-b66b-68152641996b.png",640,209,"UI component from Paper",[259],{"id":12,"title":13,"slug":49},{"slug":261,"title":262,"logo":263,"baseline":264,"categories":265},"paper","Paper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6406196d-df59-4e20-b60a-7d067ada271c.png","Design, share, ship",[266,267,271],{"id":203,"title":204,"slug":205},{"id":268,"title":269,"slug":270},8,"Design","design",{"id":119,"title":120,"slug":121},{"uuid":273,"title":274,"description":275,"canonical_path":276,"image":277,"width":278,"height":279,"image_alt":280,"kind":46,"categories":281,"app":283},"bcbe8702-4715-4eb0-8ad3-58a670704bf4","Llamaindex UI component","A user interface displaying a configuration title with a help icon and a segmented control for basic and advanced settings.","\u002Fexamples\u002Fapps\u002Fllamaindex\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ecb39b8-44d0-490e-89d3-be2090aa4709.png",1654,329,"UI component from Llamaindex",[282],{"id":12,"title":13,"slug":49},{"slug":284,"title":285,"logo":286,"baseline":287,"categories":288},"llamaindex","Llamaindex","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1e225662-6b6d-476d-a9ed-68b03c620ee1.png",null,[289,293,294,295],{"id":290,"title":291,"slug":292},45,"Open Source","open-source",{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":296,"title":297,"slug":298},105,"Workflow Automation","workflow-automation",{"uuid":300,"title":301,"description":302,"canonical_path":303,"image":304,"width":305,"height":306,"image_alt":307,"kind":46,"categories":308,"app":310},"f1e3e58a-6545-433a-83f8-ee4be82a1403","Kinescope UI component","A horizontal row of buttons for selecting time ranges, including a live status indicator and a date range picker.","\u002Fexamples\u002Fapps\u002Fkinescope\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f2aee98-63ee-4a55-9145-0b1980720559.png",1423,328,"UI component from Kinescope",[309],{"id":12,"title":13,"slug":49},{"slug":311,"title":312,"logo":313,"baseline":314,"categories":315},"kinescope","Kinescope","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F7f0420a9-24bf-46c4-89d3-9b58d519e10a.png","Videoinfrastructure made for every story",[316,317,321],{"id":154,"title":155,"slug":156},{"id":318,"title":319,"slug":320},70,"Video streaming","video-streaming",{"id":322,"title":323,"slug":324},100,"Video","video",[],[327,330,333,336,339,342,345,348,351,354,357,360,363,366,369],{"label":328,"to":329},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":331,"to":332},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":334,"to":335},"Empty State","\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":337,"to":338},"Media Editor","\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":340,"to":341},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":343,"to":344},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":346,"to":347},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":349,"to":350},"Extend design examples","\u002Fexamples\u002Fapps\u002Fextend",{"label":352,"to":353},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":355,"to":356},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":358,"to":359},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":361,"to":362},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":364,"to":365},"Paper design examples","\u002Fexamples\u002Fapps\u002Fpaper",{"label":367,"to":368},"Llamaindex design examples","\u002Fexamples\u002Fapps\u002Fllamaindex",{"label":370,"to":371},"Kinescope design examples","\u002Fexamples\u002Fapps\u002Fkinescope",{"published_at":373,"updated_at":374},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]