[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fdurable\u002Fflows":3,"content-store-meta":-1,"i-custom:bookmark":345},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":304,"links":305,"dates":342},"\u002Fexamples\u002Fapps\u002Fdurable\u002Fflows","detail","flows",true,{"title":9,"description":10,"og_image":11},"Durable user flows examples - Nicelydone","Explore Durable user flow examples. Preview the opening screens and steps for each task. AI that builds a business for you","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9f377932-49de-4afa-98da-5bac179bf567.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},"Durable design examples","\u002Fexamples\u002Fapps\u002Fdurable",{"label":23,"to":4},"Durable user flows examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"categories":34},"Durable","durable","AI that builds a business for you","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb551d9ca-2d64-4ca4-9738-73cb15d9e486.png","https:\u002F\u002Fdurable.co",[35,39,43],{"id":36,"title":37,"slug":38},7,"Web Development","web-development",{"id":40,"title":41,"slug":42},80,"Artificial Intelligence","artificial-intelligence",{"id":44,"title":45,"slug":46},96,"No code","no-code",[48,73,98,121,143,165,188,208,227,244,263,282],{"uuid":49,"title":50,"canonical_path":4,"kind":51,"patterns_count":52,"categories":53,"screens":57,"app":72},"2ca3314c-aa6c-4111-8f62-276e5f389958","Onboarding","flow",11,[54],{"id":55,"title":50,"slug":56},45,"onboarding",[58,64,68],{"uuid":59,"title":29,"description":60,"image":11,"image_alt":61,"width":62,"height":63},"9f377932-49de-4afa-98da-5bac179bf567","Account setup","Durable from Durable",3024,1780,{"uuid":65,"title":29,"description":66,"image":67,"image_alt":61,"width":62,"height":63},"5635e89f-e71c-4f0e-99d9-3882d0f2728f","Onboarding step where the user enters the type of business they are building, such as a digital design studio, before proceeding.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5635e89f-e71c-4f0e-99d9-3882d0f2728f.png",{"uuid":69,"title":29,"description":70,"image":71,"image_alt":61,"width":62,"height":63},"653b1d55-bd81-41ea-b9d2-8caac77a5bb2","Onboarding step where the user selects their current monthly revenue from a grid of options to customize their account.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F653b1d55-bd81-41ea-b9d2-8caac77a5bb2.png",{"slug":30,"title":29,"logo":32},{"uuid":74,"title":75,"canonical_path":4,"kind":51,"patterns_count":76,"categories":77,"screens":82,"app":97},"59f5cc26-40d0-4b14-8945-3902dfd34511","Customizing website header",13,[78],{"id":79,"title":80,"slug":81},67,"Customizing","customize",[83,87,93],{"uuid":84,"title":29,"description":85,"image":86,"image_alt":61,"width":62,"height":63},"8988bc0b-865e-488f-bb1c-20cb8c431fb6","Sidebar navigation Analytics dashboard","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8988bc0b-865e-488f-bb1c-20cb8c431fb6.png",{"uuid":88,"title":89,"description":90,"image":91,"image_alt":92,"width":62,"height":63},"a2df8566-3edf-4bb9-b7bb-31d49acec48f","durable.co\u002Fb\u002Fnicelydone-qub2stkj\u002Fwebsite\u002Fbuilder","Website builder canvas where an AI agent is actively generating page content, indicated by skeleton loaders and a floating status pill.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa2df8566-3edf-4bb9-b7bb-31d49acec48f.png","durable.co\u002Fb\u002Fnicelydone-qub2stkj\u002Fwebsite\u002Fbuilder from Durable",{"uuid":94,"title":89,"description":95,"image":96,"image_alt":92,"width":62,"height":63},"22482271-3b6e-48b5-8d94-ab7c2ac892a3","Website builder canvas where the user is previewing a hero section while an AI optimization process runs.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F22482271-3b6e-48b5-8d94-ab7c2ac892a3.png",{"slug":30,"title":29,"logo":32},{"uuid":99,"title":100,"canonical_path":4,"kind":51,"patterns_count":101,"categories":102,"screens":107,"app":120},"51e73f89-9cb8-41e5-8be0-94746a7a1393","Selecting media",6,[103],{"id":104,"title":105,"slug":106},82,"Selecting","select",[108,112,116],{"uuid":109,"title":89,"description":110,"image":111,"image_alt":92,"width":62,"height":63},"b0458749-10a5-419c-825f-682454535a7b","Website builder where the user configures the header content, logo, and links via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb0458749-10a5-419c-825f-682454535a7b.png",{"uuid":113,"title":89,"description":114,"image":115,"image_alt":92,"width":62,"height":63},"fdb0aa53-fdf1-400a-b473-2cf80f4c8348","WYSIWYG editor","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Ffdb0aa53-fdf1-400a-b473-2cf80f4c8348.png",{"uuid":117,"title":89,"description":118,"image":119,"image_alt":92,"width":62,"height":63},"ea6693d1-b926-443c-ae51-90eb33d34f9e","Design editor where the user selects an image from their media library or stock assets to insert into the website canvas.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fea6693d1-b926-443c-ae51-90eb33d34f9e.png",{"slug":30,"title":29,"logo":32},{"uuid":122,"title":123,"canonical_path":4,"kind":51,"patterns_count":36,"categories":124,"screens":129,"app":142},"ce59408d-297a-4154-8f22-4144c3b98dee","Configuring button settings",[125],{"id":126,"title":127,"slug":128},71,"Settings","settings",[130,134,138],{"uuid":131,"title":89,"description":132,"image":133,"image_alt":92,"width":62,"height":63},"b98c7b85-3003-4926-89e5-1ac7be4c59c0","Design editor where the user customizes the header content, including logo size, buttons, and social links, via a right-hand properties panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb98c7b85-3003-4926-89e5-1ac7be4c59c0.png",{"uuid":135,"title":89,"description":136,"image":137,"image_alt":92,"width":62,"height":63},"1e664189-1c9c-4b37-97fe-a2d1baf082ac","Website builder interface where the user configures button settings like link type, label, and destination URL in a floating inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1e664189-1c9c-4b37-97fe-a2d1baf082ac.png",{"uuid":139,"title":89,"description":140,"image":141,"image_alt":92,"width":62,"height":63},"39d3b2d5-7d9d-4990-bf3d-b62c3d23b8f9","Design editor where the user configures a button's link type, such as an external URL or email, via a floating inspector panel over the canvas.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F39d3b2d5-7d9d-4990-bf3d-b62c3d23b8f9.png",{"slug":30,"title":29,"logo":32},{"uuid":144,"title":145,"canonical_path":4,"kind":51,"patterns_count":101,"categories":146,"screens":151,"app":164},"80dd51a7-70d5-4b94-be8a-6c78c7e3524e","Updating button links",[147],{"id":148,"title":149,"slug":150},73,"Updating","update",[152,156,160],{"uuid":153,"title":89,"description":154,"image":155,"image_alt":92,"width":62,"height":63},"9f4e9204-dc73-4ad0-b6e8-f5802d1fda72","Design editor where the user configures the website header, including logo size, navigation buttons, and social links via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9f4e9204-dc73-4ad0-b6e8-f5802d1fda72.png",{"uuid":157,"title":89,"description":158,"image":159,"image_alt":92,"width":62,"height":63},"0d66256f-5a93-4e45-8f76-97e79022a044","Website builder where the user configures button settings like link type, label, and destination URL via a floating inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F0d66256f-5a93-4e45-8f76-97e79022a044.png",{"uuid":161,"title":89,"description":162,"image":163,"image_alt":92,"width":62,"height":63},"71363b1b-1249-47cb-a4e9-10ad86737071","Website builder interface where the user is configuring button settings via a floating right panel over a live preview of the site.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F71363b1b-1249-47cb-a4e9-10ad86737071.png",{"slug":30,"title":29,"logo":32},{"uuid":166,"title":167,"canonical_path":4,"kind":51,"patterns_count":168,"categories":169,"screens":174,"app":187},"157f71ad-4c11-48c7-ab75-49ce3d6fc0d6","Customizing website colors",8,[170],{"id":171,"title":172,"slug":173},14,"Creating color palette","create-color-palette",[175,179,183],{"uuid":176,"title":89,"description":177,"image":178,"image_alt":92,"width":62,"height":63},"5d474de5-878e-48ed-b317-1c33aaef3058","Website builder interface where the user edits the header content and styling via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5d474de5-878e-48ed-b317-1c33aaef3058.png",{"uuid":180,"title":89,"description":181,"image":182,"image_alt":92,"width":62,"height":63},"7b1daaf5-1927-4bfa-9e84-3bc4c2ee5e5e","Website builder where the user configures the colors, button styles, and positioning for the site header via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F7b1daaf5-1927-4bfa-9e84-3bc4c2ee5e5e.png",{"uuid":184,"title":89,"description":185,"image":186,"image_alt":92,"width":62,"height":63},"dc06d6c6-5ce0-42e4-ba0a-baddf877aee8","Design editor where the user is customizing the color theme of a website hero section using a floating inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fdc06d6c6-5ce0-42e4-ba0a-baddf877aee8.png",{"slug":30,"title":29,"logo":32},{"uuid":189,"title":190,"canonical_path":4,"kind":51,"patterns_count":191,"categories":192,"screens":194,"app":207},"ca04a718-93c4-45d6-b3f9-cace60559453","Customizing button styles",9,[193],{"id":79,"title":80,"slug":81},[195,199,203],{"uuid":196,"title":89,"description":197,"image":198,"image_alt":92,"width":62,"height":63},"98b2fae7-85f1-4ebc-98cb-e6812e7cc6ee","Design editor where the user customizes the header style of their website, including colors, button styles, and positioning, via a right-hand inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F98b2fae7-85f1-4ebc-98cb-e6812e7cc6ee.png",{"uuid":200,"title":89,"description":201,"image":202,"image_alt":92,"width":62,"height":63},"2482924e-881d-45db-ab7b-b04b218802b8","Website builder interface where the user customizes a button's style via a floating properties panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2482924e-881d-45db-ab7b-b04b218802b8.png",{"uuid":204,"title":89,"description":205,"image":206,"image_alt":92,"width":62,"height":63},"6ab19c85-7a9e-4d18-a276-f05889a13c0b","Website builder interface where the user configures button styles via a floating inspector panel over a live preview.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6ab19c85-7a9e-4d18-a276-f05889a13c0b.png",{"slug":30,"title":29,"logo":32},{"uuid":209,"title":210,"canonical_path":4,"kind":51,"patterns_count":76,"categories":211,"screens":213,"app":226},"f983d1a1-7ebf-41ba-9a65-08936ace91be","Editing website header style",[212],{"id":79,"title":80,"slug":81},[214,218,222],{"uuid":215,"title":89,"description":216,"image":217,"image_alt":92,"width":62,"height":63},"53ea0e94-d3fc-4fa7-899e-652c942f7489","Design editor where the user is customizing the header colors, button styles, and positioning via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F53ea0e94-d3fc-4fa7-899e-652c942f7489.png",{"uuid":219,"title":89,"description":220,"image":221,"image_alt":92,"width":62,"height":63},"da0e2431-264c-4df4-b84d-669a43bc968b","Design editor where the user configures the colors, button styles, and positioning for a website header via a right-side properties panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fda0e2431-264c-4df4-b84d-669a43bc968b.png",{"uuid":223,"title":89,"description":224,"image":225,"image_alt":92,"width":62,"height":63},"cdb0d7dd-3ae8-438d-9db3-8dc15dc9f989","Design editor where the user configures the header styling, including positioning, social icons, and sticky behavior, via a right-side inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcdb0d7dd-3ae8-438d-9db3-8dc15dc9f989.png",{"slug":30,"title":29,"logo":32},{"uuid":228,"title":229,"canonical_path":4,"kind":51,"patterns_count":36,"categories":230,"screens":234,"app":243},"27c5e62e-84e1-4f0d-aa79-7432e4ff23fe","Adding website sections",[231],{"id":40,"title":232,"slug":233},"Adding","add",[235,239],{"uuid":236,"title":89,"description":237,"image":238,"image_alt":92,"width":62,"height":63},"b43ae00b-50e5-48c7-8590-9e5a8140f27e","Design editor where the user is adding a new section to their website from a right-side floating panel containing options like Banner, Services, and Content.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb43ae00b-50e5-48c7-8590-9e5a8140f27e.png",{"uuid":240,"title":89,"description":241,"image":242,"image_alt":92,"width":62,"height":63},"45dab3f1-b32d-4111-90e2-7e01b4fb6202","Design editor where the user selects a banner layout to add to their website canvas from a right-side drawer.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F45dab3f1-b32d-4111-90e2-7e01b4fb6202.png",{"slug":30,"title":29,"logo":32},{"uuid":245,"title":246,"canonical_path":4,"kind":51,"patterns_count":36,"categories":247,"screens":249,"app":262},"5a20569e-2347-4900-a391-e00fcf763db9","Customizing banner section",[248],{"id":79,"title":80,"slug":81},[250,254,258],{"uuid":251,"title":89,"description":252,"image":253,"image_alt":92,"width":62,"height":63},"65993324-c561-4453-980a-00a8590d8536","Design editor where the user customizes the headline, subtext, and layout toggles for a website banner section via a floating inspector panel with AI generation options.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F65993324-c561-4453-980a-00a8590d8536.png",{"uuid":255,"title":89,"description":256,"image":257,"image_alt":92,"width":62,"height":63},"264e5e67-35fb-4f4a-850f-c91ceef20374","Website builder interface where the user edits a banner section's text content with AI generation tools in a floating property panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F264e5e67-35fb-4f4a-850f-c91ceef20374.png",{"uuid":259,"title":89,"description":260,"image":261,"image_alt":92,"width":62,"height":63},"6cae8361-564f-4541-998c-f3c9c4e29aa3","Design editor where the user configures the content and AI-generated text for a website banner section.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6cae8361-564f-4541-998c-f3c9c4e29aa3.png",{"slug":30,"title":29,"logo":32},{"uuid":264,"title":265,"canonical_path":4,"kind":51,"patterns_count":168,"categories":266,"screens":268,"app":281},"ef8debb2-23fa-4704-a86d-abfd646defb1","Configuring banner buttons",[267],{"id":126,"title":127,"slug":128},[269,273,277],{"uuid":270,"title":89,"description":271,"image":272,"image_alt":92,"width":62,"height":63},"23a1a08f-728b-414c-8a50-2c5e98241e47","Design editor where the user customizes a banner section's tagline, headline, and subtext using AI generation tools in an inspector panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F23a1a08f-728b-414c-8a50-2c5e98241e47.png",{"uuid":274,"title":89,"description":275,"image":276,"image_alt":92,"width":62,"height":63},"9416d51d-74df-4d99-a7e3-54e564d5c36b","Website builder canvas where the user configures a button's link type, label, and target section via a floating settings panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9416d51d-74df-4d99-a7e3-54e564d5c36b.png",{"uuid":278,"title":89,"description":279,"image":280,"image_alt":92,"width":62,"height":63},"6f60515c-f925-4f73-b47d-b5e7e30c3944","Design editor where the user configures a button's link type, label, and destination email address via a floating settings panel.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F6f60515c-f925-4f73-b47d-b5e7e30c3944.png",{"slug":30,"title":29,"logo":32},{"uuid":283,"title":284,"canonical_path":4,"kind":51,"patterns_count":285,"categories":286,"screens":291,"app":303},"45cfcd45-cbf8-4f5c-b6a8-a19cb355d00a","Managing services section",20,[287],{"id":288,"title":289,"slug":290},60,"Editing","edit",[292,295,299],{"uuid":293,"title":89,"description":114,"image":294,"image_alt":92,"width":62,"height":63},"c3dfad07-47bf-4448-b633-f269f82927a1","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc3dfad07-47bf-4448-b633-f269f82927a1.png",{"uuid":296,"title":89,"description":297,"image":298,"image_alt":92,"width":62,"height":63},"b2d219d6-c485-4616-ab5a-1a3be296ba40","Design editor where the user is adding a new section to their website from a categorized list including banner, services, and content.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb2d219d6-c485-4616-ab5a-1a3be296ba40.png",{"uuid":300,"title":89,"description":301,"image":302,"image_alt":92,"width":62,"height":63},"a9673e74-4372-4b6a-8359-9db19591e670","Design editor where the user opens a side drawer to browse and add new sections like Services, List, or Pricing Table to their website canvas.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa9673e74-4372-4b6a-8359-9db19591e670.png",{"slug":30,"title":29,"logo":32},[],[306,309,312,315,318,321,324,326,330,334,338],{"label":307,"to":308},"Durable product screens","\u002Fexamples\u002Fapps\u002Fdurable\u002Fscreens",{"label":310,"to":311},"Durable marketing pages","\u002Fexamples\u002Fapps\u002Fdurable\u002Fmarketing",{"label":313,"to":314},"Durable UI components","\u002Fexamples\u002Fapps\u002Fdurable\u002Fcomponents",{"label":316,"to":317},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":319,"to":320},"Artificial Intelligence app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fartificial-intelligence",{"label":322,"to":323},"No code app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fno-code",{"label":325,"to":18},"All SaaS app examples",{"label":327,"to":328,"description":329},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":331,"to":332,"description":333},"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":335,"to":336,"description":337},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":339,"to":340,"description":341},"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":343,"updated_at":344},"2026-01-20T12:44:57.000Z","2026-09-13T13:02:39.000Z",{"left":346,"top":346,"width":285,"height":285,"rotate":346,"vFlip":347,"hFlip":347,"body":348},0,false,"\u003Cg fill=\"none\">\u003Cpath d=\"M9.7334 2.41699H10.2666C11.3987 2.41699 12.2028 2.41737 12.832 2.46875C13.4526 2.51945 13.8371 2.61637 14.1416 2.77148C14.7531 3.08307 15.2509 3.57988 15.5625 4.19141C15.7176 4.49587 15.8136 4.88039 15.8643 5.50098C15.9157 6.13035 15.916 6.93496 15.916 8.06738V15.1338C15.916 15.6634 15.9153 16.0086 15.8926 16.2578C15.879 16.4067 15.8598 16.4744 15.8525 16.4971C15.8095 16.5461 15.7506 16.576 15.6855 16.5811C15.6634 16.5734 15.5976 16.5486 15.4697 16.4697C15.2568 16.3384 14.9804 16.1313 14.5566 15.8135L11.4102 13.4541C11.1193 13.236 10.8105 12.9878 10.4453 12.8916C10.1533 12.8147 9.84573 12.8147 9.55371 12.8916C9.18862 12.9879 8.88057 13.2361 8.58984 13.4541L5.44336 15.8135C5.01942 16.1314 4.74231 16.3384 4.5293 16.4697C4.40092 16.5489 4.33537 16.5735 4.31348 16.5811C4.24875 16.5759 4.18941 16.5468 4.14648 16.498C4.13942 16.4762 4.12019 16.4085 4.10645 16.2578C4.08375 16.0086 4.08301 15.6634 4.08301 15.1338V8.06738C4.08301 6.93498 4.08335 6.13034 4.13477 5.50098C4.18547 4.88035 4.28236 4.49588 4.4375 4.19141C4.74906 3.58004 5.24605 3.08305 5.85742 2.77148C6.16189 2.61635 6.54637 2.51946 7.16699 2.46875C7.79636 2.41734 8.60099 2.41699 9.7334 2.41699Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\u002F>\u003C\u002Fg>"]