[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftwingate\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":200,"links":201,"dates":232},"\u002Fexamples\u002Fapps\u002Ftwingate\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Twingate UI components examples - Nicelydone","Browse Twingate UI component design examples. Preview individual interface elements and explore related component categories. Secure access for fast-growing…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F03252b1e-42e5-4658-8eda-74b25b764e26.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},"Twingate design examples","\u002Fexamples\u002Fapps\u002Ftwingate",{"label":23,"to":4},"Twingate UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Twingate UI component design examples. Preview individual interface elements and explore related component categories. Secure access for fast-growing teams",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Twingate","twingate","Secure access for fast-growing teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftwingate-2307b896.png","https:\u002F\u002Fwww.twingate.com","TwingateHQ",[37],{"id":38,"title":39,"slug":40},78,"Security","security",[42,57,67,78,91,106,120,134,146,158,170,185],{"uuid":43,"title":44,"description":45,"canonical_path":4,"image":11,"width":46,"height":47,"image_alt":48,"kind":49,"categories":50,"app":55},"3f0f798c-437b-45c7-a94b-7aa036dbd145","Mega menu","A dark-themed global navigation header with an expanded mega menu under the 'Resources' tab. The menu displays a list of company links, featured blog posts with thumbnail images, and a whitepaper link.",3280,1017,"Mega menu from Twingate","component",[51],{"id":52,"title":53,"slug":54},290,"Flyout menu","flyout-menu",{"slug":31,"title":30,"logo":33,"categories":56},[],{"uuid":58,"title":44,"description":59,"canonical_path":4,"image":60,"width":61,"height":62,"image_alt":48,"kind":49,"categories":63,"app":65},"35d30965-5cd6-4c8d-b29b-a1d2b01405e6","A dark-themed global navigation header with an expanded mega menu. The menu displays categorized links for 'Use Cases' and 'Integrations', alongside featured 'Changelog' updates with thumbnail images.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc0babb41-cf29-48da-8691-b78d7a15c04c.png",3024,870,[64],{"id":52,"title":53,"slug":54},{"slug":31,"title":30,"logo":33,"categories":66},[],{"uuid":68,"title":69,"description":70,"canonical_path":4,"image":71,"width":61,"height":72,"image_alt":73,"kind":49,"categories":74,"app":76},"90b7954c-3ab0-4c4c-99a0-298603be73d0","Mega Menu","A global navigation header with an expanded mega menu dropdown. The dropdown reveals a grid of documentation resources, including featured cards with icons and categorized lists of links.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F03b9cb21-43ee-4fd0-840e-e4ec9d0ca1c3.png",794,"Mega Menu from Twingate",[75],{"id":52,"title":53,"slug":54},{"slug":31,"title":30,"logo":33,"categories":77},[],{"uuid":79,"title":80,"description":81,"canonical_path":4,"image":82,"width":61,"height":83,"image_alt":84,"kind":49,"categories":85,"app":89},"dfc40ed3-5994-4605-83ae-7441238425ec","Hero section","A dark-themed hero section featuring a bold headline, subheadline, and two call-to-action buttons. It includes a top navigation bar and a stylized background graphic with a bright vertical line. A partial view of a desktop interface is visible at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fabd4b79c-ed13-4275-be22-8357283c82f1.png",1531,"Hero section from Twingate",[86],{"id":87,"title":80,"slug":88},197,"hero-section",{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":49,"categories":99,"app":104},"ef90dd84-689a-4372-801e-4483a9dc1117","Network launcher dropdown","An expanded dropdown menu showing an active network connection and options to create or find other networks.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa3719c8d-bf5a-44c5-9e1c-f0a24b285e28.png",689,400,"Network launcher dropdown from Twingate",[100],{"id":101,"title":102,"slug":103},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":49,"categories":114,"app":118},"71c143d6-9269-4416-8bdd-7461b4cfb57c","Notification Toast","A dark-themed toast notification prompting the user to sign in again to verify their account. It includes an information icon on the left and a close icon on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6b91dba9-5209-4f90-8016-f2ea4928f83c.png",1094,184,"Notification Toast from Twingate",[115],{"id":116,"title":108,"slug":117},247,"notification-element",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":49,"categories":128,"app":132},"6a7279ad-86cf-4794-bcb1-81277f14169a","Date Range Picker","A date range picker component showing a start date input field and an open calendar popover. The calendar displays June 2023 with the 20th selected as the start date and the 27th outlined, likely indicating the end date.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F14c91a7d-3af0-49be-aa80-5a0b13d9bfc0.png",735,851,"Date Range Picker from Twingate",[129],{"id":112,"title":130,"slug":131},"Datepicker","datepicker",{"slug":31,"title":30,"logo":33,"categories":133},[],{"uuid":135,"title":136,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":141,"kind":49,"categories":142,"app":144},"a4cb20dd-7689-42c2-bca4-860647eacf98","Service key list item with dropdown","A list item representing a service key, showing its name, expiration status, an icon with a status indicator, and an open overflow menu with actions to edit or revoke the key.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff3b5e0dd-d9cc-4213-a392-f6d44170bb37.png",859,457,"Service key list item with dropdown from Twingate",[143],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":145},[],{"uuid":147,"title":148,"description":149,"canonical_path":4,"image":150,"width":151,"height":152,"image_alt":153,"kind":49,"categories":154,"app":156},"6a4b8b04-5597-41f4-b206-473812bee4ff","Success Toast","A blue success toast notification confirming that a service account was created.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5da1a485-4ee0-4191-9be4-ad95399bdd6d.png",1042,143,"Success Toast from Twingate",[155],{"id":116,"title":108,"slug":117},{"slug":31,"title":30,"logo":33,"categories":157},[],{"uuid":159,"title":160,"description":161,"canonical_path":4,"image":162,"width":163,"height":164,"image_alt":165,"kind":49,"categories":166,"app":168},"c4adb2cf-5a0d-498e-a9dc-e602f64d729b","Create dropdown menu","An open dropdown menu triggered by a 'Create' button, displaying a list of operating systems with their respective icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8dde682c-01ac-429c-bb4a-8f647f7a0054.png",551,597,"Create dropdown menu from Twingate",[167],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":169},[],{"uuid":171,"title":172,"description":173,"canonical_path":4,"image":174,"width":175,"height":176,"image_alt":177,"kind":49,"categories":178,"app":183},"85a61e3c-4a1e-4cf9-8e9c-91750a4810f4","Entity header","A header displaying an entity's avatar, name, and a secondary detail.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4234cfcc-f240-400c-bd7e-0fb9a2a6c585.png",739,256,"Entity header from Twingate",[179],{"id":180,"title":181,"slug":182},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":190,"height":191,"image_alt":192,"kind":49,"categories":193,"app":198},"bec798d7-1adb-4522-b63a-3dadb2126afa","Tabs with counts","A horizontal tab navigation component with two tabs, 'Resources' and 'Users'. Each tab includes a numerical count badge. The 'Users' tab is currently selected, indicated by bolder text and a solid black underline.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9a664deb-3d6c-4c8f-95bc-9f45e21d2576.png",641,210,"Tabs with counts from Twingate",[194],{"id":195,"title":196,"slug":197},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":199},[],[],[202,205,208,211,214,216,220,224,228],{"label":203,"to":204},"Twingate product screens","\u002Fexamples\u002Fapps\u002Ftwingate\u002Fscreens",{"label":206,"to":207},"Twingate marketing pages","\u002Fexamples\u002Fapps\u002Ftwingate\u002Fmarketing",{"label":209,"to":210},"Twingate user flows","\u002Fexamples\u002Fapps\u002Ftwingate\u002Fflows",{"label":212,"to":213},"Security app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsecurity",{"label":215,"to":18},"All SaaS app examples",{"label":217,"to":218,"description":219},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":221,"to":222,"description":223},"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":225,"to":226,"description":227},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":229,"to":230,"description":231},"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":233,"updated_at":234},"2022-09-13T15:15:54.000Z","2026-09-26T12:10:15.000Z"]