[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftypefully\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":48,"showcases":210,"links":211,"dates":248},"\u002Fexamples\u002Fapps\u002Ftypefully\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Typefully UI components examples - Nicelydone","Browse Typefully UI component design examples. Preview individual interface elements and explore related component categories. Distraction-free editor to…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0754cd0f-a536-48ac-9fd9-c9c906af4d85.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},"Typefully design examples","\u002Fexamples\u002Fapps\u002Ftypefully",{"label":23,"to":4},"Typefully UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Typefully UI component design examples. Preview individual interface elements and explore related component categories. Distraction-free editor to write & publish tweets and threads.",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Typefully","typefully","Distraction-free editor to write & publish tweets and threads.","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftypefully-cde82cad.png","https:\u002F\u002Ftypefully.app",[36,40,44],{"id":37,"title":38,"slug":39},14,"Social","social",{"id":41,"title":42,"slug":43},25,"Marketing","marketing",{"id":45,"title":46,"slug":47},59,"Writing tools","writing-tools",[49,64,79,94,106,121,136,147,157,172,187,202],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"42465846-508c-46d1-99f6-4d33bf021aee","User profile row","A horizontal row displaying a user's avatar, display name, handle, and a badge indicating it is the current user.",553,216,"User profile row from Typefully","component",[58],{"id":59,"title":60,"slug":61},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":77},"5ad1c370-5dac-48fe-bf99-50fca9a2a3fe","Scheduled Post Queue","A vertical list of scheduled time slots grouped by day. Empty slots offer options to create new content or choose existing drafts. One slot contains a scheduled post preview with a drag handle and action icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1e837cd8-cf6f-4280-ae3e-a0332e230fae.png",624,1267,"Scheduled Post Queue from Typefully",[73],{"id":74,"title":75,"slug":76},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":92},"da1a1f26-ad3e-4e0d-bd89-8c2fc7c5f8d1","Activity streak calendar","A contribution graph showing daily activity over a year, with a header displaying the current and best streak.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1d0938c6-a2c2-4b98-9e67-a801ae0a249e.png",2032,668,"Activity streak calendar from Typefully",[88],{"id":89,"title":90,"slug":91},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":56,"categories":102,"app":104},"ea5b90c3-3184-4627-8173-7302580726ed","KPI Row with Sparklines","A row of four key performance indicator (KPI) tiles. Each tile displays a metric name, a current value, a percentage change with a trend arrow, and a sparkline chart showing historical data.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F82365585-6c60-48af-a965-4c4af3410e48.png",1689,405,"KPI Row with Sparklines from Typefully",[103],{"id":89,"title":90,"slug":91},{"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":56,"categories":114,"app":119},"0017d833-755d-4e53-b513-04a634606916","Tooltip with toolbar","A tooltip displaying a success message and explanation, pointing to an active icon in a floating toolbar below.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F480b9dc4-36d9-42af-bc89-d56d4089dd56.png",780,345,"Tooltip with toolbar from Typefully",[115],{"id":116,"title":117,"slug":118},254,"Tooltip","tooltip-element",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":126,"height":127,"image_alt":128,"kind":56,"categories":129,"app":134},"c31ed0d5-7af3-49ee-9d8b-e750a5875662","Numbering format toggles","Two stacked segmented controls. The top control selects between Start and End positioning. The bottom control selects the numbering format style, such as '1.', '1\u002F', or '1 of 10'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0f816777-c1b7-43f0-8955-8950d4c4be89.png",976,280,"Numbering format toggles from Typefully",[130],{"id":131,"title":132,"slug":133},218,"Segmented control","segmented-control",{"slug":31,"title":30,"logo":33,"categories":135},[],{"uuid":137,"title":132,"description":138,"canonical_path":4,"image":139,"width":140,"height":141,"image_alt":142,"kind":56,"categories":143,"app":145},"412d376a-49be-493a-8705-5ac813082159","A pill-shaped segmented control with three options: Inbox, Activity, and Archive. The 'Inbox' option is currently selected, indicated by a white pill background.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa0944ecc-7494-4d65-b2ea-5254e98c2149.png",536,188,"Segmented control from Typefully",[144],{"id":131,"title":132,"slug":133},{"slug":31,"title":30,"logo":33,"categories":146},[],{"uuid":148,"title":132,"description":149,"canonical_path":4,"image":150,"width":151,"height":152,"image_alt":142,"kind":56,"categories":153,"app":155},"8ad8b94e-b6ee-4491-9901-ea57988d373e","A segmented control with two options, Typefully and Twitter, where Twitter is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F092e9903-e9b2-498e-8b51-47a7f76d540b.png",1556,324,[154],{"id":131,"title":132,"slug":133},{"slug":31,"title":30,"logo":33,"categories":156},[],{"uuid":158,"title":159,"description":160,"canonical_path":4,"image":161,"width":162,"height":163,"image_alt":164,"kind":56,"categories":165,"app":170},"bbf5352b-b06e-4dc8-b70d-abddd452f991","Sidebar Header with Tabs","A sidebar header containing an account switcher or profile identifier, a layout toggle icon, and a tabbed navigation menu for content states (Drafts, Queue, Posted). The Queue tab includes a numeric badge.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff4d016f6-6af4-4bbf-8db1-bdf1028083c4.png",525,151,"Sidebar Header with Tabs from Typefully",[166],{"id":167,"title":168,"slug":169},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":171},[],{"uuid":173,"title":174,"description":175,"canonical_path":4,"image":176,"width":177,"height":178,"image_alt":179,"kind":56,"categories":180,"app":185},"b0d169f9-5baa-4ee5-8b45-fe1ba4b93525","Upgrade prompt card","A card prompting the user to upgrade their plan to unlock a specific integration. It features an alert icon, a title, a brief explanation, and a prominent call-to-action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcf868e21-1ffe-4e42-ae86-4bcd651853ef.png",803,382,"Upgrade prompt card from Typefully",[181],{"id":182,"title":183,"slug":184},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":186},[],{"uuid":188,"title":189,"description":190,"canonical_path":4,"image":191,"width":192,"height":193,"image_alt":194,"kind":56,"categories":195,"app":200},"091b5344-3965-4784-aa56-9ac5dffa1ab4","Theme toggle group","A segmented control for selecting the application's theme, with options for Light, Dark, and System.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F863a6893-1a78-449a-a008-acb6978bd6b4.png",1284,447,"Theme toggle group from Typefully",[196],{"id":197,"title":198,"slug":199},256,"Theme settings","theme-settings",{"slug":31,"title":30,"logo":33,"categories":201},[],{"uuid":203,"title":189,"description":204,"canonical_path":4,"image":205,"width":192,"height":193,"image_alt":194,"kind":56,"categories":206,"app":208},"5897f30d-c3e3-43fc-810a-231673190687","A segmented control allowing the user to select their preferred theme: Light, Dark, or System. The System option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F928c166f-5cb1-45c2-8f6e-3cc7527bb2f1.png",[207],{"id":197,"title":198,"slug":199},{"slug":31,"title":30,"logo":33,"categories":209},[],[],[212,215,218,221,224,227,230,232,236,240,244],{"label":213,"to":214},"Typefully product screens","\u002Fexamples\u002Fapps\u002Ftypefully\u002Fscreens",{"label":216,"to":217},"Typefully marketing pages","\u002Fexamples\u002Fapps\u002Ftypefully\u002Fmarketing",{"label":219,"to":220},"Typefully user flows","\u002Fexamples\u002Fapps\u002Ftypefully\u002Fflows",{"label":222,"to":223},"Social app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsocial",{"label":225,"to":226},"Marketing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmarketing",{"label":228,"to":229},"Writing tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fwriting-tools",{"label":231,"to":18},"All SaaS app examples",{"label":233,"to":234,"description":235},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":237,"to":238,"description":239},"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":241,"to":242,"description":243},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":245,"to":246,"description":247},"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":249,"updated_at":250},"2021-09-05T12:56:02.000Z","2026-09-16T12:10:31.000Z"]