[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ffly\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":40,"showcases":215,"links":216,"dates":247},"\u002Fexamples\u002Fapps\u002Ffly\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Fly UI components examples - Nicelydone","Browse Fly UI component design examples. Preview individual interface elements and explore related component categories. Deploy app servers close to your users","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9984a8b4-573f-44cf-941c-fa5ecfca6306.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},"Fly design examples","\u002Fexamples\u002Fapps\u002Ffly",{"label":23,"to":4},"Fly 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},"Fly","fly","Deploy app servers close to your users","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffly-8wgdxhew.png","https:\u002F\u002Ffly.io","flydotio",[36],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",[41,56,71,86,101,113,128,143,158,170,185,200],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"categories":49,"app":54},"74460be3-cbf6-4a56-8f86-f89bbd3c5b72","Hero section with map","A dark-themed hero section featuring a headline, description, call-to-action button, and a stylized world map with location pins.",3280,1977,"Hero section with map from Fly","component",[50],{"id":51,"title":52,"slug":53},197,"Hero section","hero-section",{"slug":30,"title":29,"logo":32,"categories":55},[],{"uuid":57,"title":58,"description":59,"canonical_path":4,"image":60,"width":61,"height":62,"image_alt":63,"kind":48,"categories":64,"app":69},"ef4befbb-9917-4e4d-8134-92fa8d1c935e","Pre-flight checklist","A vertical checklist showing required steps to complete before an account can be deleted. It displays completed steps with a checkmark and pending steps with bulleted lists of specific items to resolve.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdfde2d30-fdde-4f15-a3d2-2b0b549a6b96.png",1027,1150,"Pre-flight checklist from Fly",[65],{"id":66,"title":67,"slug":68},227,"Stepper","stepper",{"slug":30,"title":29,"logo":32,"categories":70},[],{"uuid":72,"title":73,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":78,"kind":48,"categories":79,"app":84},"7e2f8560-5d88-44bb-b106-723f3649f3d3","Past Due Billing Alert","A prominent red alert banner warning the user that their organization payment is past due, with an inline link to the billing page.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F034508ac-27b2-4956-9e4a-51b38e87b840.png",1076,313,"Past Due Billing Alert from Fly",[80],{"id":81,"title":82,"slug":83},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":88,"description":89,"canonical_path":4,"image":90,"width":91,"height":92,"image_alt":93,"kind":48,"categories":94,"app":99},"8f48336b-8403-4ed3-9c57-a6df226b6e24","Database Import Modal","A modal dialog for importing a database. It includes a drag-and-drop file upload area for an SQLite file, a text input for the database name, and a submit button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcd47b02e-cd11-49f4-8fc5-c26ae72f5010.png",1567,1136,"Database Import Modal from Fly",[95],{"id":96,"title":97,"slug":98},188,"File upload input","file-upload-input",{"slug":30,"title":29,"logo":32,"categories":100},[],{"uuid":102,"title":103,"description":104,"canonical_path":4,"image":105,"width":106,"height":107,"image_alt":108,"kind":48,"categories":109,"app":111},"0fc44dd8-2864-465b-9d08-8e705c3124e6","Secret Token Alert","A prominent warning alert displaying a generated secret token that the user must copy. It includes a warning icon, a title, explanatory text, a dark block containing the long token string, and a link to instructions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fce84d361-f630-447d-85d5-1a564a3727b1.png",1536,1408,"Secret Token Alert from Fly",[110],{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":112},[],{"uuid":114,"title":115,"description":116,"canonical_path":4,"image":117,"width":118,"height":119,"image_alt":120,"kind":48,"categories":121,"app":126},"49a925a2-8a7a-4927-8cc0-22bb32a638b8","Fly UI component","Empty state for clusters","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff28420e2-1e89-4075-a5dd-a82b0fd23214.png",903,612,"UI component from Fly",[122],{"id":123,"title":124,"slug":125},302,"Empty state","emptystate",{"slug":30,"title":29,"logo":32,"categories":127},[],{"uuid":129,"title":130,"description":131,"canonical_path":4,"image":132,"width":133,"height":134,"image_alt":135,"kind":48,"categories":136,"app":141},"0008eeb1-77f6-48c6-9a46-e92e36b8da3f","Members Table","A simple data table displaying organization members with columns for Name, Email, Role, and Date added.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F756f03d8-5114-431a-9b55-85cf88eafc0d.png",2836,571,"Members Table from Fly",[137],{"id":138,"title":139,"slug":140},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":142},[],{"uuid":144,"title":145,"description":146,"canonical_path":4,"image":147,"width":148,"height":149,"image_alt":150,"kind":48,"categories":151,"app":156},"ec519cff-49e5-4fe0-8c14-ff687ab213c1","Date Range Picker","A date range picker component displaying a selected range from April 1 to April 30, 2024. It features a calendar view with the selected range highlighted in light blue, and quick selection buttons for common ranges at the bottom.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff14449bf-b30c-4cfc-9494-23cabed1be2c.png",957,1235,"Date Range Picker from Fly",[152],{"id":153,"title":154,"slug":155},184,"Datepicker","datepicker",{"slug":30,"title":29,"logo":32,"categories":157},[],{"uuid":159,"title":160,"description":161,"canonical_path":4,"image":162,"width":163,"height":164,"image_alt":165,"kind":48,"categories":166,"app":168},"29e5c6e1-b96c-4016-ad5e-e62e325cec05","Warning Alert","A warning alert banner with an icon, title, and descriptive text indicating that the feature is experimental and data may be incomplete.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4ae3ba97-5230-4028-9bc4-317094f3692a.png",2440,533,"Warning Alert from Fly",[167],{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":169},[],{"uuid":171,"title":172,"description":173,"canonical_path":4,"image":174,"width":175,"height":176,"image_alt":177,"kind":48,"categories":178,"app":183},"e4c180e2-b1df-4e54-a9eb-428fc6a3b0fc","Area Chart with Tooltip","A stacked area chart displaying active connections over time, featuring a hover tooltip that shows detailed metrics for a specific timestamp.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0ba381b3-3eca-4471-af7d-bf23902f8c18.png",3192,913,"Area Chart with Tooltip from Fly",[179],{"id":180,"title":181,"slug":182},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":184},[],{"uuid":186,"title":187,"description":188,"canonical_path":4,"image":189,"width":190,"height":191,"image_alt":192,"kind":48,"categories":193,"app":198},"c590deb6-4106-4f90-948b-f766fb9574ed","Activity Timeline","A vertical timeline displaying a chronological list of application events, such as releases and secret updates, with avatars, timestamps, and status badges.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F580c6e37-444a-443d-8156-86afb04f3cc8.png",3276,1621,"Activity Timeline from Fly",[194],{"id":195,"title":196,"slug":197},249,"Timeline & history","timeline-history",{"slug":30,"title":29,"logo":32,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":205,"height":206,"image_alt":207,"kind":48,"categories":208,"app":213},"6f53f6bf-1558-4ce6-ba55-0b1a1fb44079","Staged Secret Tooltip","A tooltip explaining that a secret is staged but not deployed, with instructions to run a command.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd3725bda-6be9-43ec-83b7-9e75550f63c2.png",797,336,"Staged Secret Tooltip from Fly",[209],{"id":210,"title":211,"slug":212},254,"Tooltip","tooltip-element",{"slug":30,"title":29,"logo":32,"categories":214},[],[],[217,220,223,226,229,231,235,239,243],{"label":218,"to":219},"Fly product screens","\u002Fexamples\u002Fapps\u002Ffly\u002Fscreens",{"label":221,"to":222},"Fly marketing pages","\u002Fexamples\u002Fapps\u002Ffly\u002Fmarketing",{"label":224,"to":225},"Fly user flows","\u002Fexamples\u002Fapps\u002Ffly\u002Fflows",{"label":227,"to":228},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":230,"to":18},"All SaaS app examples",{"label":232,"to":233,"description":234},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":236,"to":237,"description":238},"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":240,"to":241,"description":242},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":244,"to":245,"description":246},"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":248,"updated_at":249},"2024-04-30T11:41:41.000Z","2026-09-26T00:10:28.000Z"]