[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Ftabs":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":339,"links":340,"dates":389},"\u002Fexamples\u002Fcomponents\u002Ftabs","collection","components",true,{"example_count":9,"app_count":10},223,151,{"id":12,"title":13,"description":14},233,"Tabs","Explore how interfaces switch between related panels of content. Look at how tab labels, active states, and spacing establish a clear relationship with the displayed panel.",{"title":16,"description":17,"og_image":18},"Tabs UI examples - Nicelydone","Tabs UI design examples from SaaS apps. Explore how interfaces switch between related panels of content. Look at how tab labels, active states, and spacing…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F172d781e-6e2f-4d27-bb12-a4ea71a2df4d.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Tabs UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Tabs UI design examples from SaaS apps. Explore how interfaces switch between related panels of content. Look at how tab labels, active states, and spacing establish a clear relationship with the…",[32],{"title":33,"description":14,"links":34},"About Tabs",[],[36],"223 UI components",[38,72,105,130,160,182,204,229,247,270,290,320],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"ba626058-fd51-4744-bb34-855095b8db87","Airbnb UI component","A horizontal navigation bar with multiple text-based tabs, where 'Guest' is currently selected and indicated by an underline.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents",1396,309,"UI component from Airbnb","component",[48],{"id":12,"title":13,"slug":49},"tabs",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[56,60,64,68],{"id":57,"title":58,"slug":59},5,"Travel","travel",{"id":61,"title":62,"slug":63},12,"Hospitality","hospitality",{"id":65,"title":66,"slug":67},17,"Peer to peer","peer-to-peer",{"id":69,"title":70,"slug":71},18,"Marketplace","marketplace",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"f99a1f5b-1a50-4c7e-8a94-b70fb09a4de2","Steel UI component","A tabbed navigation component with three tabs and a flag icon on the right side.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0b2ae807-def9-4490-9814-68c1d589d131.png",1093,256,"UI component from Steel",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[89,93,97,101],{"id":90,"title":91,"slug":92},48,"Developer Tools","developer-tools",{"id":94,"title":95,"slug":96},80,"Artificial Intelligence","artificial-intelligence",{"id":98,"title":99,"slug":100},37,"Developer APIs","developer-apis",{"id":102,"title":103,"slug":104},45,"Open Source","open-source",{"uuid":106,"title":107,"description":108,"canonical_path":109,"image":110,"width":111,"height":112,"image_alt":113,"kind":46,"categories":114,"app":116},"2ca5fff7-1682-4c8c-880a-ba8863f67f8e","Dock UI component","A user management interface displaying a table of users with search, filtering, and editable details.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F101dce5b-720f-4059-9e3d-c0dc468ef53c.png",2587,1539,"UI component from Dock",[115],{"id":12,"title":13,"slug":49},{"slug":117,"title":118,"logo":119,"baseline":120,"categories":121},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[122,126],{"id":123,"title":124,"slug":125},23,"Collaboration","collaboration",{"id":127,"title":128,"slug":129},29,"Task Management","task-management",{"uuid":131,"title":132,"description":133,"canonical_path":134,"image":135,"width":136,"height":137,"image_alt":138,"kind":46,"categories":139,"app":141},"2a451f1d-36cf-4a00-9b00-5967d8364a57","Bloom UI component","A modal dialog with tab navigation and action buttons.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdbe355be-d4ce-4b2b-8259-f30001a7b69a.png",2455,522,"UI component from Bloom",[140],{"id":12,"title":13,"slug":49},{"slug":142,"title":143,"logo":144,"baseline":145,"categories":146},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[147,148,152,156],{"id":94,"title":95,"slug":96},{"id":149,"title":150,"slug":151},3,"Shopping","shopping",{"id":153,"title":154,"slug":155},7,"Web Development","web-development",{"id":157,"title":158,"slug":159},96,"No code","no-code",{"uuid":161,"title":162,"canonical_path":163,"image":164,"width":165,"height":166,"image_alt":167,"kind":46,"categories":168,"app":170},"15585b76-b0c5-4ff1-9689-d23feaf6919b","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F994a5496-bdbc-42ca-a06e-838fa7d790e7.png",2848,2482,"UI component from Voiceflow",[169],{"id":12,"title":13,"slug":49},{"slug":171,"title":172,"logo":173,"baseline":174,"categories":175},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[176,177,181],{"id":94,"title":95,"slug":96},{"id":178,"title":179,"slug":180},47,"Customer Service","customer-service",{"id":157,"title":158,"slug":159},{"uuid":183,"title":184,"description":185,"canonical_path":186,"image":187,"width":188,"height":189,"image_alt":190,"kind":46,"categories":191,"app":193},"fd9bc2ae-a545-4251-89e7-ffc5ce181bad","Segmented Filter Control","Lets users switch between All, Tools, and Projects filters in the search overlay","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9ec80dcf-c944-4045-a4af-586b90e95fe1.png",1370,348,"Segmented Filter Control from HeyGen",[192],{"id":12,"title":13,"slug":49},{"slug":194,"title":195,"logo":196,"baseline":197,"categories":198},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[199,203],{"id":200,"title":201,"slug":202},100,"Video","video",{"id":94,"title":95,"slug":96},{"uuid":205,"title":206,"description":207,"canonical_path":208,"image":209,"width":210,"height":211,"image_alt":212,"kind":46,"categories":213,"app":215},"24b2dfea-2078-4f13-bb95-bbf7b5ea4f06","Tokens Collectibles Tabs","Switches between token and collectible selection modes with integrated search","\u002Fexamples\u002Fapps\u002Ffamily\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F743d7759-fef2-43b1-883a-16a3f33952b2.png",1205,326,"Tokens Collectibles Tabs from Family",[214],{"id":12,"title":13,"slug":49},{"slug":216,"title":217,"logo":218,"baseline":219,"categories":220},"family","Family","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F54b399c5-e1bc-4b2d-9748-6c66246cee2b.png","Your favorite crypto wallet.",[221,225],{"id":222,"title":223,"slug":224},36,"Finance","finance",{"id":226,"title":227,"slug":228},95,"Blockchain","blockchain",{"uuid":230,"title":231,"description":232,"canonical_path":233,"image":234,"width":235,"height":236,"image_alt":237,"kind":46,"categories":238,"app":240},"a7c22593-9617-498e-8784-b42b918c0b61","Transaction types segmented control","Lets users switch between Regular, Internal and Income transaction explanations in an onboarding flow","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1a062656-40d8-4a4e-b0f9-fe1866e79667.png",1289,1220,"Transaction types segmented control from Copilot",[239],{"id":12,"title":13,"slug":49},{"slug":241,"title":242,"logo":243,"baseline":244,"categories":245},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[246],{"id":222,"title":223,"slug":224},{"uuid":248,"title":249,"description":250,"canonical_path":251,"image":252,"width":253,"height":254,"image_alt":255,"kind":46,"categories":256,"app":258},"c3303c4b-949e-408f-b415-57b116cec1ea","Webset tabs","Switches between create new webset and view past websets views","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7d60a633-9f60-4399-947b-83c9e4c97f49.jpg",1212,144,"Webset tabs from Exa",[257],{"id":12,"title":13,"slug":49},{"slug":259,"title":260,"logo":261,"baseline":262,"categories":263},"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",[264,268,269],{"id":265,"title":266,"slug":267},55,"Search engine","search-engine",{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"uuid":271,"title":272,"description":273,"canonical_path":274,"image":275,"width":276,"height":277,"image_alt":278,"kind":46,"categories":279,"app":281},"76206270-bdd9-4971-b70c-d488a312aa20","Tab bar","Allows switching between different data views of the recorded session such as Pages, Console, Network","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1a081961-fed0-4fd1-8103-e6247dcc7fd6.jpg",2546,228,"Tab bar from Browserbase",[280],{"id":12,"title":13,"slug":49},{"slug":282,"title":283,"logo":284,"baseline":285,"categories":286},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[287,288,289],{"id":90,"title":91,"slug":92},{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},{"uuid":291,"title":292,"description":293,"canonical_path":294,"image":295,"width":296,"height":297,"image_alt":298,"kind":46,"categories":299,"app":301},"907473b9-699e-11f1-8c91-960002ce6e45","Pill Tabs","A horizontal segmented control displaying four navigation options, with 'Skills' highlighted as the active selection.","\u002Fexamples\u002Fapps\u002Ftown\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa0183d84-9424-450d-9d85-d54629a91ba2.jpg",816,176,"Pill Tabs from Town",[300],{"id":12,"title":13,"slug":49},{"slug":302,"title":303,"logo":304,"baseline":305,"categories":306},"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.",[307,308,312,316],{"id":94,"title":95,"slug":96},{"id":309,"title":310,"slug":311},30,"Productivity","productivity",{"id":313,"title":314,"slug":315},92,"Email","email",{"id":317,"title":318,"slug":319},101,"Calendar","calendar",{"uuid":321,"title":322,"description":323,"canonical_path":324,"image":325,"width":326,"height":327,"image_alt":328,"kind":46,"categories":329,"app":331},"745ca209-7ed4-4161-ad72-3f145737da68","Elevenlabs UI component","A workspace settings page with a horizontal tab navigation for different categories like General, Members, Groups, Notifications, and Resources.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F41417c5c-a85d-4a5c-ae96-92c284b915dd.png",2559,414,"UI component from Elevenlabs",[330],{"id":12,"title":13,"slug":49},{"slug":332,"title":333,"logo":334,"baseline":335,"categories":336},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[337,338],{"id":94,"title":95,"slug":96},{"id":98,"title":99,"slug":100},[],[341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386],{"label":342,"to":343},"AI Editing","\u002Fexamples\u002Fscreens\u002Fai-editing",{"label":345,"to":346},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":348,"to":349},"AI Agent","\u002Fexamples\u002Fscreens\u002Fai-agent",{"label":351,"to":352},"Team Management","\u002Fexamples\u002Fscreens\u002Fteam-management",{"label":354,"to":355},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":357,"to":358},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":360,"to":361},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":363,"to":364},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":366,"to":367},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":369,"to":370},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":372,"to":373},"Family design examples","\u002Fexamples\u002Fapps\u002Ffamily",{"label":375,"to":376},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":378,"to":379},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":381,"to":382},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":384,"to":385},"Town design examples","\u002Fexamples\u002Fapps\u002Ftown",{"label":387,"to":388},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"published_at":390,"updated_at":391},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]