[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fthreads\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":246},"\u002Fexamples\u002Fapps\u002Fthreads\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Threads UI components examples - Nicelydone","Browse Threads UI component design examples. Preview individual interface elements and explore related component categories. Threads is a Slack replacement…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe825c130-fa37-44f9-a296-eda033e605c2.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},"Threads design examples","\u002Fexamples\u002Fapps\u002Fthreads",{"label":23,"to":4},"Threads UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Threads UI component design examples. Preview individual interface elements and explore related component categories. Threads is a Slack replacement designed for makers",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":30,"categories":35},"Threads","threads","Threads is a Slack replacement designed for makers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fthreads-a7bc4a45.png","https:\u002F\u002Fthreads.com",[36],{"id":37,"title":38,"slug":39},49,"Social Network","social-network",[41,56,71,86,101,116,131,146,161,173,184,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},"e825c130-fa37-44f9-a296-eda033e605c2","Keyboard shortcut helper text","A descriptive text block explaining keyboard shortcut behavior for sending messages. It includes visual keyboard key indicators (Kbd) embedded within the sentence.",1015,215,"Keyboard shortcut helper text from Threads","component",[50],{"id":51,"title":52,"slug":53},235,"Tips","tips",{"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},"e6341f33-3f9e-479b-9a92-b616401ff12c","Theme selection cards","Two side-by-side cards for selecting a theme. The left card represents light mode and the right card represents dark mode. Each card contains an avatar, a title, a subtitle, and a radio button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe6341f33-3f9e-479b-9a92-b616401ff12c.png",1484,452,"Theme selection cards from Threads",[65],{"id":66,"title":67,"slug":68},256,"Theme settings","theme-settings",{"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},"892ef7a5-2c97-488b-bd48-33b8be470e0f","Radio group setting","A radio group for configuring the default thread share link setting, with three mutually exclusive options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F892ef7a5-2c97-488b-bd48-33b8be470e0f.png",1184,462,"Radio group setting from Threads",[80],{"id":81,"title":82,"slug":83},179,"Checkbox & radio","checkbox-radio",{"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":99},"fd9d5107-c3b3-4d9a-a4fa-8f4f3cc601ad","Avatar with add button","A pill-shaped container holding an add-user icon button and a user avatar with an online status indicator.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffd9d5107-c3b3-4d9a-a4fa-8f4f3cc601ad.png",259,192,"Avatar with add button from Threads",[95],{"id":96,"title":97,"slug":98},169,"Avatar","avatar",{"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":48,"categories":109,"app":114},"7be5d843-c716-4b33-9f50-32eade3fe1a9","Add member button","A wide, light gray button with a user-plus icon and the text 'Add channel member'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7be5d843-c716-4b33-9f50-32eade3fe1a9.png",688,208,"Add member button from Threads",[110],{"id":111,"title":112,"slug":113},175,"Button","button",{"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":48,"categories":124,"app":129},"1a49827f-56fb-4c7d-9994-d2dcb8ff2ba8","Color swatch selector","A horizontal row of rounded square color swatches for selecting a theme. One swatch is selected, indicated by a checkmark. An add image button is at the end of the row.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1a49827f-56fb-4c7d-9994-d2dcb8ff2ba8.png",755,206,"Color swatch selector from Threads",[125],{"id":126,"title":127,"slug":128},183,"Color picker","color-picker",{"slug":31,"title":30,"logo":33,"categories":130},[],{"uuid":132,"title":133,"description":134,"canonical_path":4,"image":135,"width":136,"height":137,"image_alt":138,"kind":48,"categories":139,"app":144},"59a05015-32a1-4b2a-93b4-64b9e6316009","Audio only switch","A toggle switch to enable or disable audio-only mode, featuring a speaker icon and text label.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F59a05015-32a1-4b2a-93b4-64b9e6316009.png",825,182,"Audio only switch from Threads",[140],{"id":141,"title":142,"slug":143},236,"Toggle\u002FSwitch","toggle-switch",{"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":48,"categories":154,"app":159},"5b510f46-0362-407d-b4e2-a8c88b890e89","Link Copied Toast","A dark, pill-shaped toast notification confirming that a link has been copied. It features a purple link icon on the left and a close button on the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5b510f46-0362-407d-b4e2-a8c88b890e89.png",592,294,"Link Copied Toast from Threads",[155],{"id":156,"title":157,"slug":158},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":160},[],{"uuid":162,"title":163,"description":164,"canonical_path":4,"image":165,"width":166,"height":167,"image_alt":168,"kind":48,"categories":169,"app":171},"842febe5-bebe-4002-9705-9e5aac2bf134","Presentation mode button","A button with an icon, text label, and a keyboard shortcut indicator.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F842febe5-bebe-4002-9705-9e5aac2bf134.png",706,226,"Presentation mode button from Threads",[170],{"id":111,"title":112,"slug":113},{"slug":31,"title":30,"logo":33,"categories":172},[],{"uuid":174,"title":175,"description":176,"canonical_path":4,"image":177,"width":178,"height":167,"image_alt":179,"kind":48,"categories":180,"app":182},"722da902-607d-4a7c-8d8b-4d98cb5c5959","Do later button","A white pill-shaped button with a purple clock icon, the text 'Do later', and a keyboard shortcut hint 'F'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F722da902-607d-4a7c-8d8b-4d98cb5c5959.png",414,"Do later button from Threads",[181],{"id":111,"title":112,"slug":113},{"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":48,"categories":192,"app":197},"3bc4ff99-9536-4eb1-84ed-0fa52d9dfadb","Member management tabs","A horizontal tab navigation bar with a search input on the right. The tabs filter a list of users by role or status, such as Members, Guests, and Invited.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3bc4ff99-9536-4eb1-84ed-0fa52d9dfadb.png",1966,369,"Member management tabs from Threads",[193],{"id":194,"title":195,"slug":196},233,"Tabs","tabs",{"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},"7df0f5e7-59ac-409c-a00a-3d1b0cf0aedf","Sidebar Navigation","A vertical sidebar navigation menu featuring a workspace switcher, a primary compose button, and collapsible sections for core views, channels, direct chats, and apps. It includes unread notification badges.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7df0f5e7-59ac-409c-a00a-3d1b0cf0aedf.png",764,1380,"Sidebar Navigation from Threads",[208],{"id":209,"title":210,"slug":211},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":213},[],[],[216,219,222,225,228,230,234,238,242],{"label":217,"to":218},"Threads product screens","\u002Fexamples\u002Fapps\u002Fthreads\u002Fscreens",{"label":220,"to":221},"Threads marketing pages","\u002Fexamples\u002Fapps\u002Fthreads\u002Fmarketing",{"label":223,"to":224},"Threads user flows","\u002Fexamples\u002Fapps\u002Fthreads\u002Fflows",{"label":226,"to":227},"Social Network app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsocial-network",{"label":229,"to":18},"All SaaS app examples",{"label":231,"to":232,"description":233},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":235,"to":236,"description":237},"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":239,"to":240,"description":241},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":243,"to":244,"description":245},"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":247,"updated_at":248},"2023-01-30T17:40:56.000Z","2026-09-13T13:02:39.000Z"]