[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fpipe\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":39,"showcases":213,"links":214,"dates":245},"\u002Fexamples\u002Fapps\u002Fpipe\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Pipe UI components examples - Nicelydone","Browse Pipe UI component design examples. Preview individual interface elements and explore related component categories. The modern capital platform","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdfebbee5-7893-4b70-93a1-9f7d7fcef886.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},"Pipe design examples","\u002Fexamples\u002Fapps\u002Fpipe",{"label":23,"to":4},"Pipe 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":30,"categories":34},"Pipe","pipe","The modern capital platform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fpipe-ecd4e6cg.png","https:\u002F\u002Fpipe.com",[35],{"id":36,"title":37,"slug":38},36,"Finance","finance",[40,55,69,84,99,114,129,141,153,168,183,198],{"uuid":41,"title":42,"description":43,"canonical_path":4,"image":11,"width":44,"height":45,"image_alt":46,"kind":47,"categories":48,"app":53},"ca50a99c-4393-46f1-8fae-b22b34d45d50","Mega Menu","A large dropdown menu showing resources, company links, and a featured blog post.",1667,867,"Mega Menu from Pipe","component",[49],{"id":50,"title":51,"slug":52},290,"Flyout menu","flyout-menu",{"slug":30,"title":29,"logo":32,"categories":54},[],{"uuid":56,"title":57,"description":58,"canonical_path":4,"image":59,"width":60,"height":61,"image_alt":62,"kind":47,"categories":63,"app":67},"fdd06f7e-474d-40ee-83ab-60f31cb2cfba","Hero section","A dark-themed hero section featuring a centered headline, subheadline, and a primary call-to-action button. It includes a top navigation bar with a logo and links, and a mockup of a product interface at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdb75f597-52c5-4d18-8a3b-2b016c1c17bf.png",3269,1868,"Hero section from Pipe",[64],{"id":65,"title":57,"slug":66},197,"hero-section",{"slug":30,"title":29,"logo":32,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":74,"height":75,"image_alt":76,"kind":47,"categories":77,"app":82},"49c1cc37-f897-4882-abf2-dd8a72cda9d1","Payback schedule chart","A bar chart showing a payback schedule over several months, with a title and explanatory text above it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F560d5cef-6fe8-4b88-829d-5ed5dba23988.png",750,679,"Payback schedule chart from Pipe",[78],{"id":79,"title":80,"slug":81},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":83},[],{"uuid":85,"title":86,"description":87,"canonical_path":4,"image":88,"width":89,"height":90,"image_alt":91,"kind":47,"categories":92,"app":97},"31153011-9d75-44f7-9098-1b7ce07ef3f4","Integration status card","A card displaying the status of a connected data source, showing the source name, a status badge indicating it is synced, and a timestamp of the last sync.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F69f98e69-2fd0-4a84-80ec-bb7c72fb3afe.png",1088,488,"Integration status card from Pipe",[93],{"id":94,"title":95,"slug":96},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":98},[],{"uuid":100,"title":101,"description":102,"canonical_path":4,"image":103,"width":104,"height":105,"image_alt":106,"kind":47,"categories":107,"app":112},"4d61a912-ccba-4755-915f-2a7ffb35f5e0","Two-factor Authentication Toggle","A settings row with a title, descriptive text, and a toggle switch to enable or disable two-factor authentication.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2c9ab961-88c1-43ce-aa8e-b69a0af7cb76.png",1472,481,"Two-factor Authentication Toggle from Pipe",[108],{"id":109,"title":110,"slug":111},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":113},[],{"uuid":115,"title":116,"description":117,"canonical_path":4,"image":118,"width":119,"height":120,"image_alt":121,"kind":47,"categories":122,"app":127},"c0ccd73b-d2ee-467a-92e2-4c049d57a5f4","Payback period radio group","A radio group presenting four payback period options (3, 6, 9, and 12 months) with associated bid prices and trade limits. The 12-month option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3643e863-92f6-4187-89cb-64d942b2a38e.png",710,510,"Payback period radio group from Pipe",[123],{"id":124,"title":125,"slug":126},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":128},[],{"uuid":130,"title":131,"description":132,"canonical_path":4,"image":133,"width":134,"height":135,"image_alt":136,"kind":47,"categories":137,"app":139},"540daf75-ccfe-4802-a2e2-0a04b6be2e62","Payments summary widget","A widget displaying payment statistics with a title, two KPI columns for 'Total paid' and 'Total remaining', and a segmented progress bar showing zero activity.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1ae1e49f-93f7-4cdc-951b-3bbbd2306a69.png",786,386,"Payments summary widget from Pipe",[138],{"id":79,"title":80,"slug":81},{"slug":30,"title":29,"logo":32,"categories":140},[],{"uuid":142,"title":143,"description":144,"canonical_path":4,"image":145,"width":146,"height":147,"image_alt":148,"kind":47,"categories":149,"app":151},"62717ed5-7cb3-4e7d-a046-8cf7a3706dd5","Empty state chart","An empty state for a trading activity bar chart. It displays a zero balance, a time range toggle, and a faded background chart with a prompt and button to start trading.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F21ffad7b-77a1-40ac-a994-78dd9d789e9c.png",1589,1068,"Empty state chart from Pipe",[150],{"id":79,"title":80,"slug":81},{"slug":30,"title":29,"logo":32,"categories":152},[],{"uuid":154,"title":155,"description":156,"canonical_path":4,"image":157,"width":158,"height":159,"image_alt":160,"kind":47,"categories":161,"app":166},"56a54544-fb49-4096-8ff2-10ca5ec813e7","Amount slider with input","A composite control allowing users to set a monetary amount using either a text input field or a horizontal slider. It includes a label, a currency symbol prefix, and helper text indicating the remaining available amount.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9e9e855d-f762-4a7a-8e37-2145ff6eb1ab.png",757,375,"Amount slider with input from Pipe",[162],{"id":163,"title":164,"slug":165},223,"Slider","slider",{"slug":30,"title":29,"logo":32,"categories":167},[],{"uuid":169,"title":170,"description":171,"canonical_path":4,"image":172,"width":173,"height":174,"image_alt":175,"kind":47,"categories":176,"app":181},"bfe6fc13-4c52-42e2-a12a-ee873c1f76b4","Product tour popover","A dark-themed popover explaining terms, featuring a title, description, an accordion for FAQs, and pagination controls with previous\u002Fnext buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8589c424-c195-4d27-b451-6319bdd683bd.png",614,727,"Product tour popover from Pipe",[177],{"id":178,"title":179,"slug":180},168,"Accordion","accordion",{"slug":30,"title":29,"logo":32,"categories":182},[],{"uuid":184,"title":185,"description":186,"canonical_path":4,"image":187,"width":188,"height":189,"image_alt":190,"kind":47,"categories":191,"app":196},"26ab2509-6320-434a-ae07-af3e573a52c3","Onboarding tour popover","A dark-themed popover explaining how capital access is determined, featuring a close icon, descriptive text, a dot pagination indicator showing progress through the tour, and a next arrow button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F50f8a6f7-060e-4be3-87af-48b590602a65.png",646,437,"Onboarding tour popover from Pipe",[192],{"id":193,"title":194,"slug":195},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":197},[],{"uuid":199,"title":200,"description":201,"canonical_path":4,"image":202,"width":203,"height":204,"image_alt":205,"kind":47,"categories":206,"app":211},"faad17bb-fe64-494f-a90f-6056018155f2","User profile block","A user profile block displaying an avatar, user name, and company name.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3b2ff12c-c366-42a2-a7f9-ee2b860a556a.png",453,200,"User profile block from Pipe",[207],{"id":208,"title":209,"slug":210},169,"Avatar","avatar",{"slug":30,"title":29,"logo":32,"categories":212},[],[],[215,218,221,224,227,229,233,237,241],{"label":216,"to":217},"Pipe product screens","\u002Fexamples\u002Fapps\u002Fpipe\u002Fscreens",{"label":219,"to":220},"Pipe marketing pages","\u002Fexamples\u002Fapps\u002Fpipe\u002Fmarketing",{"label":222,"to":223},"Pipe user flows","\u002Fexamples\u002Fapps\u002Fpipe\u002Fflows",{"label":225,"to":226},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":228,"to":18},"All SaaS app examples",{"label":230,"to":231,"description":232},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":234,"to":235,"description":236},"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":238,"to":239,"description":240},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":242,"to":243,"description":244},"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":246,"updated_at":247},"2023-07-03T14:25:30.000Z","2026-09-26T12:10:15.000Z"]