[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftwist\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":223,"links":224,"dates":261},"\u002Fexamples\u002Fapps\u002Ftwist\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Twist UI components examples - Nicelydone","Browse Twist UI component design examples. Preview individual interface elements and explore related component categories. Work is changing. Messaging…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1ab922e8-bd70-476d-9973-afeef9188212.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},"Twist design examples","\u002Fexamples\u002Fapps\u002Ftwist",{"label":23,"to":4},"Twist UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Twist UI component design examples. Preview individual interface elements and explore related component categories. Work is changing. Messaging should too.",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Twist","twist","Work is changing. Messaging should too.","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftwist-d9919fae.png","https:\u002F\u002Ftwist.com","TwistWork",[37,41,45],{"id":38,"title":39,"slug":40},23,"Collaboration","collaboration",{"id":42,"title":43,"slug":44},42,"Messaging","messaging",{"id":46,"title":47,"slug":48},89,"Remote","remote",[50,65,80,95,105,120,135,150,165,180,194,209],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"1ab922e8-bd70-476d-9973-afeef9188212","Upgrade prompt card","A card prompting the user to upgrade their plan to access advanced security controls. It includes an icon, a title, a brief description of the benefits, and two buttons for upgrading or learning more.",1472,687,"Upgrade prompt card from Twist","component",[59],{"id":60,"title":61,"slug":62},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":70,"height":71,"image_alt":72,"kind":57,"categories":73,"app":78},"311a4315-049a-4bf7-a3b8-d19b8429a705","External link button","A button with a label and an external link icon, indicating it opens a new page or tab.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F311a4315-049a-4bf7-a3b8-d19b8429a705.png",436,192,"External link button from Twist",[74],{"id":75,"title":76,"slug":77},175,"Button","button",{"slug":31,"title":30,"logo":33,"categories":79},[],{"uuid":81,"title":82,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":87,"kind":57,"categories":88,"app":93},"dd32c75c-1692-4d66-9e20-378a60a04b12","Integration card","A card displaying an integration option with its logo, name, description, and action buttons to add or view details.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd32c75c-1692-4d66-9e20-378a60a04b12.png",675,546,"Integration card from Twist",[89],{"id":90,"title":91,"slug":92},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":82,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":87,"kind":57,"categories":101,"app":103},"cd06ad64-2419-4aac-a6bc-c9a8f09af162","A card component displaying an integration option with an icon, title, description, and action buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcd06ad64-2419-4aac-a6bc-c9a8f09af162.png",650,473,[102],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":112,"kind":57,"categories":113,"app":118},"9821b892-bcf5-4d27-928f-12ef302a1a39","Segmented control","A pill-shaped segmented control with three options: Manage, Browse, and Build. The 'Manage' option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9821b892-bcf5-4d27-928f-12ef302a1a39.png",586,208,"Segmented control from Twist",[114],{"id":115,"title":116,"slug":117},277,"Button group","button-group",{"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":57,"categories":128,"app":133},"c136c096-739c-4ec0-b7bb-e461864ec0aa","Weekly schedule checkboxes","A horizontal row of checkboxes for selecting days of the week, labeled 'Weekly schedule'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc136c096-739c-4ec0-b7bb-e461864ec0aa.png",942,235,"Weekly schedule checkboxes from Twist",[129],{"id":130,"title":131,"slug":132},199,"Input date","input-date",{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":140,"height":141,"image_alt":142,"kind":57,"categories":143,"app":148},"8639f57b-1e93-4113-b150-3c3f78bd230f","Email display toggle","A toggle switch with a label to control whether an email address is displayed on a profile.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8639f57b-1e93-4113-b150-3c3f78bd230f.png",506,164,"Email display toggle from Twist",[144],{"id":145,"title":146,"slug":147},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":149},[],{"uuid":151,"title":152,"description":153,"canonical_path":4,"image":154,"width":155,"height":156,"image_alt":157,"kind":57,"categories":158,"app":163},"204be200-0d84-47b2-8a8d-a75bda09cfe1","Google Login Button","A social login button for Google, featuring the Google logo and text 'Log in with Google', positioned below a 'Google' section heading.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F204be200-0d84-47b2-8a8d-a75bda09cfe1.png",472,243,"Google Login Button from Twist",[159],{"id":160,"title":161,"slug":162},289,"Social login button","social-login-button",{"slug":31,"title":30,"logo":33,"categories":164},[],{"uuid":166,"title":167,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":172,"kind":57,"categories":173,"app":178},"3ad041a8-4538-4615-90e0-a76260e2e388","Avatar upload field","A form field for uploading a user profile photo, featuring a default avatar placeholder, an upload button, and helper text specifying the file size limit.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3ad041a8-4538-4615-90e0-a76260e2e388.png",639,381,"Avatar upload field from Twist",[174],{"id":175,"title":176,"slug":177},188,"File upload input","file-upload-input",{"slug":31,"title":30,"logo":33,"categories":179},[],{"uuid":181,"title":182,"description":183,"canonical_path":4,"image":184,"width":185,"height":141,"image_alt":186,"kind":57,"categories":187,"app":192},"f22bcee6-b4f0-41c9-b987-0f628aad4197","Twist UI component","A toggle switch for dark mode","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff22bcee6-b4f0-41c9-b987-0f628aad4197.png",634,"UI component from Twist",[188],{"id":189,"title":190,"slug":191},256,"Theme settings","theme-settings",{"slug":31,"title":30,"logo":33,"categories":193},[],{"uuid":195,"title":196,"description":197,"canonical_path":4,"image":198,"width":199,"height":200,"image_alt":201,"kind":57,"categories":202,"app":207},"ab6979b8-6296-4759-8520-0cea7c29e1ba","Workspace switcher dropdown","A dropdown menu for switching workspaces and accessing settings. It includes the current workspace details, options to create or invite, settings links with keyboard shortcuts, and a dark mode toggle.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fab6979b8-6296-4759-8520-0cea7c29e1ba.png",761,1055,"Workspace switcher dropdown from Twist",[203],{"id":204,"title":205,"slug":206},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":208},[],{"uuid":210,"title":211,"description":212,"canonical_path":4,"image":213,"width":214,"height":215,"image_alt":216,"kind":57,"categories":217,"app":221},"c932fb3a-e859-427a-a5ef-305f871bb857","Tip Card","A card offering a tip or suggestion, featuring a title with an icon, a descriptive body text, and a link for more information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc932fb3a-e859-427a-a5ef-305f871bb857.png",976,544,"Tip Card from Twist",[218],{"id":126,"title":219,"slug":220},"Tips","tips",{"slug":31,"title":30,"logo":33,"categories":222},[],[],[225,228,231,234,237,240,243,245,249,253,257],{"label":226,"to":227},"Twist product screens","\u002Fexamples\u002Fapps\u002Ftwist\u002Fscreens",{"label":229,"to":230},"Twist marketing pages","\u002Fexamples\u002Fapps\u002Ftwist\u002Fmarketing",{"label":232,"to":233},"Twist user flows","\u002Fexamples\u002Fapps\u002Ftwist\u002Fflows",{"label":235,"to":236},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":238,"to":239},"Messaging app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmessaging",{"label":241,"to":242},"Remote app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fremote",{"label":244,"to":18},"All SaaS app examples",{"label":246,"to":247,"description":248},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":250,"to":251,"description":252},"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":254,"to":255,"description":256},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":258,"to":259,"description":260},"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":262,"updated_at":263},"2022-10-22T13:01:06.000Z","2026-09-13T13:02:39.000Z"]