[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftailscale\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":40,"showcases":214,"links":215,"dates":228},"\u002Fexamples\u002Fapps\u002Ftailscale\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Tailscale UI components examples - Nicelydone","Browse Tailscale UI component design examples. Preview individual interface elements and explore related component categories. Best VPN service for secure…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2da1af2b-0d8e-4a6c-a5c5-dbd6dbf002cb.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},"Tailscale design examples","\u002Fexamples\u002Fapps\u002Ftailscale",{"label":23,"to":4},"Tailscale UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Tailscale UI component design examples. Preview individual interface elements and explore related component categories. Best VPN service for secure networks",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Tailscale","tailscale","Best VPN service for secure networks","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftailscale-a7f66593.png","https:\u002F\u002Ftailscale.com",[36],{"id":37,"title":38,"slug":39},78,"Security","security",[41,56,71,86,98,110,125,140,155,170,185,199],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"categories":49,"app":54},"3e7c63b8-214b-47a4-a8de-9251b5b90425","Usage progress indicator","A progress bar showing the number of devices with access out of a total available limit.",852,343,"Usage progress indicator from Tailscale","component",[50],{"id":51,"title":52,"slug":53},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":55},[],{"uuid":57,"title":58,"description":59,"canonical_path":4,"image":60,"width":61,"height":62,"image_alt":63,"kind":48,"categories":64,"app":69},"2d9591bd-eb79-46f7-97ba-b4019bf06b4d","Checkout stepper","A horizontal stepper showing three stages of a checkout process, with the first step currently active.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7629fbec-b028-44e8-a3e8-4505ea8dd841.png",1276,304,"Checkout stepper from Tailscale",[65],{"id":66,"title":67,"slug":68},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":70},[],{"uuid":72,"title":73,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":78,"kind":48,"categories":79,"app":84},"b9f38610-b8e5-41cb-88b2-ba0164fb7d80","Device quantity input","A numeric input field with inline minus and plus buttons to adjust the quantity of devices.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F45bfbf13-5de7-4867-9d0e-e6b6856aec70.png",585,204,"Device quantity input from Tailscale",[80],{"id":81,"title":82,"slug":83},257,"Input number","input-number",{"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":48,"categories":94,"app":96},"d329e365-8ab1-4b84-9975-8e6860c66165","Usage progress bar","A progress bar showing current device usage against a total limit, with a title and numeric count.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcc0b7b26-f994-4514-9fc3-621afd38b4ac.png",621,269,"Usage progress bar from Tailscale",[95],{"id":51,"title":52,"slug":53},{"slug":31,"title":30,"logo":33,"categories":97},[],{"uuid":99,"title":100,"description":101,"canonical_path":4,"image":102,"width":103,"height":104,"image_alt":105,"kind":48,"categories":106,"app":108},"e80a48d7-a551-4aa3-867d-35367fb62f7f","Key Expiry Settings Form","A settings section for configuring key expiry duration, featuring a title, description with a link, a number input with stepper controls and a unit label, helper text, and disabled Save and Reset buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc65ae213-0300-4839-b703-bc5ad706838c.png",1499,671,"Key Expiry Settings Form from Tailscale",[107],{"id":81,"title":82,"slug":83},{"slug":31,"title":30,"logo":33,"categories":109},[],{"uuid":111,"title":112,"description":113,"canonical_path":4,"image":114,"width":115,"height":116,"image_alt":117,"kind":48,"categories":118,"app":123},"d8bc1ca2-8c6d-4d30-ac46-e73b08bc8ead","Settings toggle section","A settings section with a title, description, a 'Learn more' link, and a toggle switch to enable or disable a specific feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F790102a5-019d-4519-ac79-92f06dbba162.png",1492,473,"Settings toggle section from Tailscale",[119],{"id":120,"title":121,"slug":122},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":124},[],{"uuid":126,"title":127,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":132,"kind":48,"categories":133,"app":138},"e628b61f-c47f-4bf5-bdd7-738801659290","Access control tooltip","A tooltip displaying access control information for a service, triggered by an info icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa5414c35-d99d-492b-b97e-be26bb373fc8.png",618,293,"Access control tooltip from Tailscale",[134],{"id":135,"title":136,"slug":137},254,"Tooltip","tooltip-element",{"slug":31,"title":30,"logo":33,"categories":139},[],{"uuid":141,"title":142,"description":143,"canonical_path":4,"image":144,"width":145,"height":146,"image_alt":147,"kind":48,"categories":148,"app":153},"8b4d9d71-ed2f-401c-9bd6-2af3a5ca61c9","Search and filter bar","A horizontal toolbar containing a wide search input with active query text and a clear button, followed by two dropdown filter buttons for Type and User.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fadbd4861-e2e2-4c0e-8a35-0d27575f4b05.png",2497,335,"Search and filter bar from Tailscale",[149],{"id":150,"title":151,"slug":152},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":154},[],{"uuid":156,"title":157,"description":158,"canonical_path":4,"image":159,"width":160,"height":161,"image_alt":162,"kind":48,"categories":163,"app":168},"2b5ef4bf-59e1-4579-ad9d-be3b93bdef3a","Services Table","A data table displaying a list of network services, including their port, type, machine name, and access controls.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2da1b1fa-bdcb-4a03-95e6-a45625c9e97c.png",2495,1887,"Services Table from Tailscale",[164],{"id":165,"title":166,"slug":167},248,"Table","table-2",{"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":48,"categories":178,"app":183},"7dbc63b5-ba15-4774-ad32-f044f41beb94","Segmented control tabs","A horizontal tab group with three options: Edit file, Preview changes, and Preview rules. The middle tab is currently selected, indicated by blue text and icon on a white background, while the others have a light gray background.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F055f8528-046c-45fa-9a82-f5127703f5e9.png",979,216,"Segmented control tabs from Tailscale",[179],{"id":180,"title":181,"slug":182},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":145,"height":190,"image_alt":191,"kind":48,"categories":192,"app":197},"6871e178-156e-4604-9f31-a8ded7dfeb7b","Code editor with side panel","A code editor interface for editing JSON configuration files, featuring a main editor area with line numbers and syntax highlighting, a top toolbar with tabs, a side panel with collapsible documentation and feature sections, and bottom action buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7a9b1db8-8f70-477a-8164-ae54ba02e934.png",1558,"Code editor with side panel from Tailscale",[193],{"id":194,"title":195,"slug":196},187,"Code block","code-block",{"slug":31,"title":30,"logo":33,"categories":198},[],{"uuid":200,"title":201,"description":202,"canonical_path":4,"image":203,"width":204,"height":205,"image_alt":206,"kind":48,"categories":207,"app":212},"0e36e8d1-d3dd-467b-ad55-1123d4292f35","Informational Alert","An informational alert box indicating that no ACL tags were found, with a link to create them.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fadada3cf-8fa5-4960-a295-a7801ce188de.png",1056,260,"Informational Alert from Tailscale",[208],{"id":209,"title":210,"slug":211},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":213},[],[],[216,219,222,225],{"label":217,"to":218},"Tailscale product screens","\u002Fexamples\u002Fapps\u002Ftailscale\u002Fscreens",{"label":220,"to":221},"Tailscale marketing pages","\u002Fexamples\u002Fapps\u002Ftailscale\u002Fmarketing",{"label":223,"to":224},"Tailscale user flows","\u002Fexamples\u002Fapps\u002Ftailscale\u002Fflows",{"label":226,"to":227},"Security app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsecurity",{"published_at":229,"updated_at":230},"2024-02-05T10:34:37.000Z","2026-09-19T12:10:06.000Z"]