[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffiberplane\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":44,"showcases":219,"links":220,"dates":254},"\u002Fexamples\u002Fapps\u002Ffiberplane\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Fiberplane UI components examples - Nicelydone","Browse Fiberplane UI component design examples. Preview individual interface elements and explore related component categories. Collaborative Notebooks for…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8994cb07-24fd-4cee-98f0-70dbc94cbae8.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},"Fiberplane design examples","\u002Fexamples\u002Fapps\u002Ffiberplane",{"label":23,"to":4},"Fiberplane UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Fiberplane UI component design examples. Preview individual interface elements and explore related component categories. Collaborative Notebooks for debugging your infrastructure",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Fiberplane","fiberplane","Collaborative Notebooks for debugging your infrastructure","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffiberplane-a5be02b8.png","https:\u002F\u002Ffiberplane.com",[36,40],{"id":37,"title":38,"slug":39},23,"Collaboration","collaboration",{"id":41,"title":42,"slug":43},48,"Developer Tools","developer-tools",[45,60,75,90,105,120,134,149,164,179,194,209],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"8994cb07-24fd-4cee-98f0-70dbc94cbae8","Fiberplane UI component","User profile information",574,192,"UI component from Fiberplane","component",[54],{"id":55,"title":56,"slug":57},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":65,"height":66,"image_alt":67,"kind":52,"categories":68,"app":73},"06b8beaf-81c5-432c-aac8-076a10ed45f6","Time Range Dropdown","A time range selector showing a start and end time input, with an open dropdown menu offering relative time presets like 'Last 5 minutes' and 'Last 15 minutes'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F06b8beaf-81c5-432c-aac8-076a10ed45f6.png",1704,1109,"Time Range Dropdown from Fiberplane",[69],{"id":70,"title":71,"slug":72},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":80,"height":81,"image_alt":82,"kind":52,"categories":83,"app":88},"95739474-d898-4dc4-8255-7650a2e83a65","Time Range Picker with Cascading Menu","A time range selection component featuring two input fields for start and end times, and a dropdown menu with cascading options for quick relative time selections.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F95739474-d898-4dc4-8255-7650a2e83a65.png",1714,1134,"Time Range Picker with Cascading Menu from Fiberplane",[84],{"id":85,"title":86,"slug":87},199,"Input date","input-date",{"slug":31,"title":30,"logo":33,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":95,"height":96,"image_alt":97,"kind":52,"categories":98,"app":103},"97ab8be3-7f19-4c7b-9b31-02e24489fa45","Date and time range picker","A calendar view for selecting a date, combined with inputs for setting an absolute time range and an Apply button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F97ab8be3-7f19-4c7b-9b31-02e24489fa45.png",600,895,"Date and time range picker from Fiberplane",[99],{"id":100,"title":101,"slug":102},184,"Datepicker","datepicker",{"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":52,"categories":113,"app":118},"593aaa6c-10c2-4e32-80b1-626f76398101","Notebook header","A top navigation bar showing the current workspace, a breadcrumb trail to the active notebook, and action buttons for sharing and more options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F593aaa6c-10c2-4e32-80b1-626f76398101.png",3024,125,"Notebook header from Fiberplane",[114],{"id":115,"title":116,"slug":117},240,"Horizontal navigation","horizontal-navigation",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":100,"image_alt":126,"kind":52,"categories":127,"app":132},"9e2f97b2-53f5-4bca-9def-a7d5d2a0b5fa","Removable tag","A pill-shaped tag with a label and a close icon, allowing the user to remove it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9e2f97b2-53f5-4bca-9def-a7d5d2a0b5fa.png",327,"Removable tag from Fiberplane",[128],{"id":129,"title":130,"slug":131},260,"Badge","badge",{"slug":31,"title":30,"logo":33,"categories":133},[],{"uuid":135,"title":136,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":141,"kind":52,"categories":142,"app":147},"91ab63ab-81e7-4c3b-bafe-6a6dbb43fb9a","Copyable code block","A single-line code block displaying a shell command with a copy-to-clipboard icon in the top right corner.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F91ab63ab-81e7-4c3b-bafe-6a6dbb43fb9a.png",1454,452,"Copyable code block from Fiberplane",[143],{"id":144,"title":145,"slug":146},187,"Code block","code-block",{"slug":31,"title":30,"logo":33,"categories":148},[],{"uuid":150,"title":151,"description":152,"canonical_path":4,"image":153,"width":154,"height":155,"image_alt":156,"kind":52,"categories":157,"app":162},"d2dd61f9-b2b8-49d8-9aae-9e41806642ac","Getting Started Stepper Cards","A horizontal row of three colorful cards acting as a getting started stepper. Each card has a number badge and a title for a setup step.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd2dd61f9-b2b8-49d8-9aae-9e41806642ac.png",1916,710,"Getting Started Stepper Cards from Fiberplane",[158],{"id":159,"title":160,"slug":161},227,"Stepper","stepper",{"slug":31,"title":30,"logo":33,"categories":163},[],{"uuid":165,"title":166,"description":167,"canonical_path":4,"image":168,"width":169,"height":170,"image_alt":171,"kind":52,"categories":172,"app":177},"38f3c258-63fb-404f-956b-58318f14d954","Sidebar Navigation","A vertical sidebar navigation menu featuring workspace switching, primary navigation links, a recent items list, and a prominent 'New notebook' action.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F38f3c258-63fb-404f-956b-58318f14d954.png",686,1782,"Sidebar Navigation from Fiberplane",[173],{"id":174,"title":175,"slug":176},209,"Vertical navigation","vertical-navigation",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":181,"description":182,"canonical_path":4,"image":183,"width":184,"height":185,"image_alt":186,"kind":52,"categories":187,"app":192},"8eddd7e1-38cf-4cfc-8bd0-25b724661be6","Dot pagination","A horizontal row of four circular dots indicating pagination or progress, with the first dot filled to show the active state.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8eddd7e1-38cf-4cfc-8bd0-25b724661be6.png",219,150,"Dot pagination from Fiberplane",[188],{"id":189,"title":190,"slug":191},213,"Progress indicator","progress-indicator",{"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":52,"categories":202,"app":207},"01ab3d53-dccb-417d-b8bf-a4fb37383445","Workspace Name Input","A standard text input field labeled 'Workspace name' with a light gray background.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F01ab3d53-dccb-417d-b8bf-a4fb37383445.png",894,234,"Workspace Name Input from Fiberplane",[203],{"id":204,"title":205,"slug":206},201,"Input text","input-text",{"slug":31,"title":30,"logo":33,"categories":208},[],{"uuid":210,"title":211,"description":212,"canonical_path":4,"image":213,"width":199,"height":200,"image_alt":214,"kind":52,"categories":215,"app":217},"0eb65731-4c64-4094-9c5a-4a97f873f17d","URL Input Field","A text input field for specifying a workspace URL, featuring a label and placeholder text showing the base URL path.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0eb65731-4c64-4094-9c5a-4a97f873f17d.png","URL Input Field from Fiberplane",[216],{"id":204,"title":205,"slug":206},{"slug":31,"title":30,"logo":33,"categories":218},[],[],[221,224,227,230,233,236,238,242,246,250],{"label":222,"to":223},"Fiberplane product screens","\u002Fexamples\u002Fapps\u002Ffiberplane\u002Fscreens",{"label":225,"to":226},"Fiberplane marketing pages","\u002Fexamples\u002Fapps\u002Ffiberplane\u002Fmarketing",{"label":228,"to":229},"Fiberplane user flows","\u002Fexamples\u002Fapps\u002Ffiberplane\u002Fflows",{"label":231,"to":232},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":234,"to":235},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":237,"to":18},"All SaaS app examples",{"label":239,"to":240,"description":241},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":243,"to":244,"description":245},"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":247,"to":248,"description":249},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":251,"to":252,"description":253},"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":255,"updated_at":256},"2023-01-18T14:05:17.000Z","2026-09-13T13:02:39.000Z"]