[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fsubstack\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":48,"showcases":219,"links":220,"dates":257},"\u002Fexamples\u002Fapps\u002Fsubstack\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Substack UI components examples - Nicelydone","Browse Substack UI component design examples. Preview individual interface elements and explore related component categories. A new model for publishing","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3e24cdea-b002-4d7d-ab85-2118592ce3db.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},"Substack design examples","\u002Fexamples\u002Fapps\u002Fsubstack",{"label":23,"to":4},"Substack UI components examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"Substack","substack","A new model for publishing","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsubstack-bc6a8fa8.png","https:\u002F\u002Fsubstack.com","SubstackInc",[36,40,44],{"id":37,"title":38,"slug":39},24,"Blogging Platforms","blogging-platforms",{"id":41,"title":42,"slug":43},6,"Publishing","publishing",{"id":45,"title":46,"slug":47},27,"Email Newsletters","email-newsletters",[49,64,79,91,103,118,133,148,159,174,189,204],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"3e24cdea-b002-4d7d-ab85-2118592ce3db","Help tooltip","A dark tooltip pointing to a help icon, explaining the source of the recommendations.",746,193,"Help tooltip from Substack","component",[58],{"id":59,"title":60,"slug":61},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"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},"c6c4656e-14e6-4def-b847-9912c323f4f4","Referral link copy field","A read-only input field displaying a referral link with a prominent button to copy the link to the clipboard.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc6c4656e-14e6-4def-b847-9912c323f4f4.png",1576,417,"Referral link copy field from Substack",[73],{"id":74,"title":75,"slug":76},241,"Click to copy","click-to-copy",{"slug":30,"title":29,"logo":32,"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":89},"991e1179-d199-4a6b-955b-2e213abdc35f","Read-only URL field with copy button","A read-only input field displaying an RSS feed URL, accompanied by a 'Copy' button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F991e1179-d199-4a6b-955b-2e213abdc35f.png",1580,373,"Read-only URL field with copy button from Substack",[88],{"id":74,"title":75,"slug":76},{"slug":30,"title":29,"logo":32,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":56,"categories":99,"app":101},"778b75b6-860d-40c2-b399-78c5b0f14754","Copy link input","A read-only input field displaying a URL with an attached button to copy the link to the clipboard. It includes a title and helper text with a reset link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F778b75b6-860d-40c2-b399-78c5b0f14754.png",1456,455,"Copy link input from Substack",[100],{"id":74,"title":75,"slug":76},{"slug":30,"title":29,"logo":32,"categories":102},[],{"uuid":104,"title":105,"description":106,"canonical_path":4,"image":107,"width":108,"height":109,"image_alt":110,"kind":56,"categories":111,"app":116},"537daa54-9f66-4b73-9d5d-f79501f41279","Image gallery upload modal","A modal window for uploading images to a gallery. It features a drag-and-drop area with a dashed border and a browse link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F537daa54-9f66-4b73-9d5d-f79501f41279.png",864,858,"Image gallery upload modal from Substack",[112],{"id":113,"title":114,"slug":115},188,"File upload input","file-upload-input",{"slug":30,"title":29,"logo":32,"categories":117},[],{"uuid":119,"title":120,"description":121,"canonical_path":4,"image":122,"width":123,"height":124,"image_alt":125,"kind":56,"categories":126,"app":131},"863df04c-7c2e-46d3-86a0-8981bcfb988a","Referral prompt card","A card prompting the user to insert a referral button into their newsletter draft.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F863df04c-7c2e-46d3-86a0-8981bcfb988a.png",1712,572,"Referral prompt card from Substack",[127],{"id":128,"title":129,"slug":130},235,"Tips","tips",{"slug":30,"title":29,"logo":32,"categories":132},[],{"uuid":134,"title":135,"description":136,"canonical_path":4,"image":137,"width":138,"height":139,"image_alt":140,"kind":56,"categories":141,"app":146},"2dccd0f4-47d2-42c4-934b-8587ac540c32","Onboarding Checklist","A vertical checklist guiding a new user through the setup process, featuring a progress bar, completed steps, pending steps, and a primary call to action.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2dccd0f4-47d2-42c4-934b-8587ac540c32.png",916,1109,"Onboarding Checklist from Substack",[142],{"id":143,"title":144,"slug":145},227,"Stepper","stepper",{"slug":30,"title":29,"logo":32,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"width":153,"height":153,"image_alt":154,"kind":56,"categories":155,"app":157},"12ebf1c8-7b5d-4dd7-9b64-beb267255ad6","Avatar upload","A circular avatar placeholder with an overlapping add button, used to upload a profile picture.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12ebf1c8-7b5d-4dd7-9b64-beb267255ad6.png",330,"Avatar upload from Substack",[156],{"id":113,"title":114,"slug":115},{"slug":30,"title":29,"logo":32,"categories":158},[],{"uuid":160,"title":161,"description":162,"canonical_path":4,"image":163,"width":164,"height":165,"image_alt":166,"kind":56,"categories":167,"app":172},"3f374a1e-6dc1-42c9-9b83-01ba20a80c68","Subdomain input field","A text input field for choosing a custom subdomain, showing a success state with a green checkmark icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f374a1e-6dc1-42c9-9b83-01ba20a80c68.png",647,250,"Subdomain input field from Substack",[168],{"id":169,"title":170,"slug":171},201,"Input text","input-text",{"slug":30,"title":29,"logo":32,"categories":173},[],{"uuid":175,"title":176,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":181,"kind":56,"categories":182,"app":187},"366dfbb6-8f3b-4d28-907b-012a85de6898","Interest selection tags","A grid of selectable tags representing various topics or interests, used for personalization during onboarding.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F366dfbb6-8f3b-4d28-907b-012a85de6898.png",986,886,"Interest selection tags from Substack",[183],{"id":184,"title":185,"slug":186},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":188},[],{"uuid":190,"title":191,"description":192,"canonical_path":4,"image":193,"width":194,"height":195,"image_alt":196,"kind":56,"categories":197,"app":202},"51685265-fa96-4af5-85f4-220ae8b16603","Selectable publication list item","A list item displaying a publication's avatar, title, author, and a short description, with a checked checkbox indicating it is selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F51685265-fa96-4af5-85f4-220ae8b16603.png",1009,273,"Selectable publication list item from Substack",[198],{"id":199,"title":200,"slug":201},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":203},[],{"uuid":205,"title":206,"description":207,"canonical_path":4,"image":208,"width":209,"height":210,"image_alt":211,"kind":56,"categories":212,"app":217},"997d8f03-913a-4ac2-9466-35638e461a71","Dark mode toggle item","A menu item or list item used to toggle dark mode, featuring a moon icon and text label.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F997d8f03-913a-4ac2-9466-35638e461a71.png",458,163,"Dark mode toggle item from Substack",[213],{"id":214,"title":215,"slug":216},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":218},[],[],[221,224,227,230,233,236,239,241,245,249,253],{"label":222,"to":223},"Substack product screens","\u002Fexamples\u002Fapps\u002Fsubstack\u002Fscreens",{"label":225,"to":226},"Substack marketing pages","\u002Fexamples\u002Fapps\u002Fsubstack\u002Fmarketing",{"label":228,"to":229},"Substack user flows","\u002Fexamples\u002Fapps\u002Fsubstack\u002Fflows",{"label":231,"to":232},"Blogging Platforms app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fblogging-platforms",{"label":234,"to":235},"Publishing app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpublishing",{"label":237,"to":238},"Email Newsletters app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Femail-newsletters",{"label":240,"to":18},"All SaaS app examples",{"label":242,"to":243,"description":244},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":246,"to":247,"description":248},"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":250,"to":251,"description":252},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":254,"to":255,"description":256},"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":258,"updated_at":259},"2023-01-27T19:09:19.000Z","2026-09-13T13:02:39.000Z"]