[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftango\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":41,"showcases":210,"links":211,"dates":242},"\u002Fexamples\u002Fapps\u002Ftango\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Tango UI components examples - Nicelydone","Browse Tango UI component design examples. Preview individual interface elements and explore related component categories. Interactive walkthroughs, created…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbcb3fb3b-ca8a-4a9f-8ba4-01b834a27f73.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"Tango design examples","\u002Fexamples\u002Fapps\u002Ftango",{"label":23,"to":4},"Tango UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Tango UI component design examples. Preview individual interface elements and explore related component categories. Interactive walkthroughs, created in seconds",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Tango","tango","Interactive walkthroughs, created in seconds","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftango-94551899.png","https:\u002F\u002Fwww.tango.us\u002F","Tango_HQ",[37],{"id":38,"title":39,"slug":40},22,"Knowledge Management","knowledge-management",[42,57,72,86,101,116,128,143,158,169,184,199],{"uuid":43,"title":44,"description":45,"canonical_path":4,"image":11,"width":46,"height":47,"image_alt":48,"kind":49,"categories":50,"app":55},"620ac129-cea3-4567-b86d-9122d4efb867","Color swatch picker","A color picker component allowing users to select a highlight color from a predefined palette or add a custom color.",1365,521,"Color swatch picker from Tango","component",[51],{"id":52,"title":53,"slug":54},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":56},[],{"uuid":58,"title":59,"description":60,"canonical_path":4,"image":61,"width":62,"height":63,"image_alt":64,"kind":49,"categories":65,"app":70},"7802c708-cbfb-48ac-b0b5-6e3cbc81434d","Tango UI component","A modal menu with multiple options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe789c024-11c6-4ce3-9b70-62c9373eb7d4.png",848,801,"UI component from Tango",[66],{"id":67,"title":68,"slug":69},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":71},[],{"uuid":73,"title":74,"description":75,"canonical_path":4,"image":76,"width":62,"height":77,"image_alt":78,"kind":49,"categories":79,"app":84},"07eb81f6-a0a1-4b92-a185-b136072798b7","Workflow Card","A card displaying a workflow preview, title, timestamp, and associated app icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fefb2abda-fd89-4baf-80e4-40d7601144da.png",789,"Workflow Card from Tango",[80],{"id":81,"title":82,"slug":83},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":49,"categories":94,"app":99},"f81c55ac-81fc-4848-92ca-d11c3c2aa46b","Sidebar navigation","A vertical sidebar navigation menu featuring a workspace switcher, search bar, primary navigation links with icons, a member quota indicator, an invite button, and secondary links including a prominent feature announcement.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F95bb2b21-0515-460c-9759-279a7d505e47.png",644,1673,"Sidebar navigation from Tango",[95],{"id":96,"title":97,"slug":98},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":106,"height":107,"image_alt":108,"kind":49,"categories":109,"app":114},"385846db-86e6-41aa-a191-e79438054227","Onboarding progress header","A header for an onboarding section showing a completed progress bar and a collapse icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb025f5bb-8ee8-4afd-a69b-2e6bec9fca55.png",605,195,"Onboarding progress header from Tango",[110],{"id":111,"title":112,"slug":113},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":115},[],{"uuid":117,"title":118,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":123,"kind":49,"categories":124,"app":126},"00391ca8-e4be-4f46-a384-de0e9df49abe","Member quota progress","A circular progress indicator showing the current number of free members used out of the total allowed, accompanied by a button to invite more members.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F67e8f178-4a0c-457d-afbc-a44f3bef095f.png",674,303,"Member quota progress from Tango",[125],{"id":111,"title":112,"slug":113},{"slug":31,"title":30,"logo":33,"categories":127},[],{"uuid":129,"title":130,"description":131,"canonical_path":4,"image":132,"width":133,"height":134,"image_alt":135,"kind":49,"categories":136,"app":141},"5ccd0045-c5f4-4218-89d9-e76859b06602","App Header","A top navigation bar featuring a logo, page title with contextual actions, primary and secondary action buttons, and a user profile avatar.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5fb69699-3648-4c67-be10-ae94def938f6.png",3024,200,"App Header from Tango",[137],{"id":138,"title":139,"slug":140},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":142},[],{"uuid":144,"title":145,"description":146,"canonical_path":4,"image":147,"width":148,"height":149,"image_alt":150,"kind":49,"categories":151,"app":156},"b3e624b2-1177-431e-a86e-34580a8edc6b","Information Alert","An inline informational alert banner with a blue icon, explanatory text, and an embedded text link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd245d83b-2704-4493-87b0-16470b163285.png",1414,364,"Information Alert from Tango",[152],{"id":153,"title":154,"slug":155},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":157},[],{"uuid":159,"title":160,"description":161,"canonical_path":4,"image":162,"width":63,"height":163,"image_alt":164,"kind":49,"categories":165,"app":167},"9c0e5420-db0d-4249-b152-e15e0e51f9c3","Informational Alert Pill","A small, pill-shaped alert badge containing a lightning bolt icon and a brief informational message about automatic updates.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F700aae6b-d39b-4973-bb20-d196d68ca38c.png",176,"Informational Alert Pill from Tango",[166],{"id":153,"title":154,"slug":155},{"slug":31,"title":30,"logo":33,"categories":168},[],{"uuid":170,"title":171,"description":172,"canonical_path":4,"image":173,"width":174,"height":175,"image_alt":176,"kind":49,"categories":177,"app":182},"9a57daba-be48-46a9-888b-7dc308688a45","Onboarding Checklist Card","A card displaying an onboarding checklist with a progress bar and a list of tasks. One task is completed, one is active with a call-to-action button, and two are pending.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2e4f4d91-e99a-4e0d-a114-438dbb7e4de6.png",609,939,"Onboarding Checklist Card from Tango",[178],{"id":179,"title":180,"slug":181},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":183},[],{"uuid":185,"title":186,"description":187,"canonical_path":4,"image":188,"width":189,"height":190,"image_alt":191,"kind":49,"categories":192,"app":197},"02841434-9326-43c8-a014-9e71ae180fa7","Role selection dropdown","A dropdown input field with a label asking 'What is your role?' and placeholder text 'Click to select...'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ddfe9e1-7aa3-40f8-9e53-f25095dcae2f.png",1256,380,"Role selection dropdown from Tango",[193],{"id":194,"title":195,"slug":196},204,"Input select","input-select",{"slug":31,"title":30,"logo":33,"categories":198},[],{"uuid":200,"title":201,"description":202,"canonical_path":4,"image":203,"width":133,"height":204,"image_alt":205,"kind":49,"categories":206,"app":208},"550aeb91-9be9-402e-8948-db98239c1ec9","Linear progress bar","A horizontal progress bar indicating 40% completion, with a text label centered above the track.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fae9ef964-8b0e-4868-b7f6-e1d52d92ad09.png",162,"Linear progress bar from Tango",[207],{"id":111,"title":112,"slug":113},{"slug":31,"title":30,"logo":33,"categories":209},[],[],[212,215,218,221,224,226,230,234,238],{"label":213,"to":214},"Tango product screens","\u002Fexamples\u002Fapps\u002Ftango\u002Fscreens",{"label":216,"to":217},"Tango marketing pages","\u002Fexamples\u002Fapps\u002Ftango\u002Fmarketing",{"label":219,"to":220},"Tango user flows","\u002Fexamples\u002Fapps\u002Ftango\u002Fflows",{"label":222,"to":223},"Knowledge Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fknowledge-management",{"label":225,"to":18},"All SaaS app examples",{"label":227,"to":228,"description":229},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":231,"to":232,"description":233},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":235,"to":236,"description":237},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":239,"to":240,"description":241},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":243,"updated_at":244},"2023-06-05T18:06:26.000Z","2026-09-13T13:02:39.000Z"]