[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fstepper":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":337,"links":338,"dates":387},"\u002Fexamples\u002Fcomponents\u002Fstepper","collection","components",true,{"example_count":9,"app_count":10},173,112,{"id":12,"title":13,"description":14},227,"Stepper","Explore how interfaces show a task as a sequence of steps. Look at how labels, current position, and completion states distinguish the stages of the process.",{"title":16,"description":17,"og_image":18},"Stepper UI examples - Nicelydone","Stepper UI design examples from SaaS apps. Explore how interfaces show a task as a sequence of steps. Look at how labels, current position, and completion…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ba20039-1213-4e5e-9bba-29ae11e0e18c.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Stepper UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Stepper UI design examples from SaaS apps. Explore how interfaces show a task as a sequence of steps. Look at how labels, current position, and completion states distinguish the stages of the process.",[32],{"title":33,"description":14,"links":34},"About Stepper",[],[36],"173 UI components",[38,68,97,124,151,169,196,218,248,269,288,317],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"02177638-7a6e-47de-8cce-be5e9f877e00","Alloy UI component","A step-by-step wizard for connecting a GitHub repository to build an application from the browser.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",1456,813,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"stepper",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"2e5e63a4-95a5-42d6-8c11-03e9368bdf18","Flask UI component","A modal window presenting a vertical list of actions or steps, with one item marked as completed and others pending.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F11998e16-6a01-4aac-b5b2-992c8c93673b.png",706,543,"UI component from Flask",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[85,89,93],{"id":86,"title":87,"slug":88},100,"Video","video",{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":94,"title":95,"slug":96},35,"Feedback","feedback",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"48f82f44-22e3-4643-ae3a-d9f180c5ca19","Steel UI component","A setup guide for browser use with code examples and step-by-step instructions.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F44b2f75e-edd2-47f0-bebd-1697b1f987f2.png",1936,1745,"UI component from Steel",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[114,115,116,120],{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":117,"title":118,"slug":119},37,"Developer APIs","developer-apis",{"id":121,"title":122,"slug":123},45,"Open Source","open-source",{"uuid":125,"title":126,"description":127,"canonical_path":128,"image":129,"width":130,"height":131,"image_alt":132,"kind":46,"categories":133,"app":135},"84930e73-1542-4564-a00c-cf580cbe0d25","Zaro UI component","A modal window presenting an onboarding checklist with credit rewards and an option to upgrade the user's plan.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8c4653d2-1b49-41a9-9f92-2b3123f14d89.png",752,906,"UI component from Zaro",[134],{"id":12,"title":13,"slug":49},{"slug":136,"title":137,"logo":138,"baseline":139,"categories":140},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[141,142,143,147],{"id":90,"title":91,"slug":92},{"id":61,"title":62,"slug":63},{"id":144,"title":145,"slug":146},22,"Knowledge Management","knowledge-management",{"id":148,"title":149,"slug":150},46,"Analytics","analytics",{"uuid":152,"title":153,"description":154,"canonical_path":155,"image":156,"width":157,"height":158,"image_alt":159,"kind":46,"categories":160,"app":162},"cfc531a2-649f-40ff-898e-49bb2509d553","Riverside UI component","A user interface displaying a multi-step content creation workflow with a video preview.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb3a389cb-a250-4056-a3bc-66c933549ccf.png",1478,1440,"UI component from Riverside",[161],{"id":12,"title":13,"slug":49},{"slug":163,"title":164,"logo":165,"baseline":166,"categories":167},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[168],{"id":86,"title":87,"slug":88},{"uuid":170,"title":171,"description":172,"canonical_path":173,"image":174,"width":175,"height":176,"image_alt":177,"kind":46,"categories":178,"app":180},"3ce3ddf1-cec0-4b81-b220-6e4375108389","Axiom UI component","A 'Get started' page for a data platform, guiding users through initial setup steps and showcasing integrations.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fac0b3ef6-c00b-43c5-bc07-5265318cf7ba.png",1864,1707,"UI component from Axiom",[179],{"id":12,"title":13,"slug":49},{"slug":181,"title":182,"logo":183,"baseline":184,"categories":185},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[186,187,191,195],{"id":148,"title":149,"slug":150},{"id":188,"title":189,"slug":190},57,"Big data","big-data",{"id":192,"title":193,"slug":194},16,"Monitoring","monitoring",{"id":57,"title":58,"slug":59},{"uuid":197,"title":198,"description":199,"canonical_path":200,"image":201,"width":202,"height":203,"image_alt":204,"kind":46,"categories":205,"app":207},"76b00228-2295-4ece-a225-0bdcc2f7d544","Dock UI component","A header for a workspace creation process with a step-by-step progress indicator.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9672774b-b47c-480e-85c1-df16f9b72228.png",2297,309,"UI component from Dock",[206],{"id":12,"title":13,"slug":49},{"slug":208,"title":209,"logo":210,"baseline":211,"categories":212},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[213,214],{"id":90,"title":91,"slug":92},{"id":215,"title":216,"slug":217},29,"Task Management","task-management",{"uuid":219,"title":220,"description":221,"canonical_path":222,"image":223,"width":224,"height":225,"image_alt":226,"kind":46,"categories":227,"app":229},"1364df41-da3f-477a-898c-2915b8828ed2","Bloom UI component","A progress display for project deployment showing completed, in-progress, and pending steps.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5d77fd01-9c15-499a-9601-bae641c5abb1.png",520,678,"UI component from Bloom",[228],{"id":12,"title":13,"slug":49},{"slug":230,"title":231,"logo":232,"baseline":233,"categories":234},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[235,236,240,244],{"id":61,"title":62,"slug":63},{"id":237,"title":238,"slug":239},3,"Shopping","shopping",{"id":241,"title":242,"slug":243},7,"Web Development","web-development",{"id":245,"title":246,"slug":247},96,"No code","no-code",{"uuid":249,"title":250,"description":251,"canonical_path":252,"image":253,"width":254,"height":255,"image_alt":256,"kind":46,"categories":257,"app":259},"37cec115-96b9-48c9-b91b-8164dd7a24fd","2FA Authenticator Setup Card","Guides user through setting up 2FA using an authenticator app with QR code and manual key","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F56091c70-882f-484b-9ccf-e565449517d9.png",1197,1470,"2FA Authenticator Setup Card from Copilot",[258],{"id":12,"title":13,"slug":49},{"slug":260,"title":261,"logo":262,"baseline":263,"categories":264},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[265],{"id":266,"title":267,"slug":268},36,"Finance","finance",{"uuid":270,"title":271,"description":272,"canonical_path":273,"image":274,"width":275,"height":276,"image_alt":277,"kind":46,"categories":278,"app":280},"86e7f067-75f2-4cc4-8a2d-03c9d6134928","Elevenlabs UI component","A modal dialog for creating a faceless video, presenting a step-by-step workflow with options for template, video, voiceover, and captions.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1b9e4dcd-fffe-4074-bbb5-2339b579ad04.png",575,1425,"UI component from Elevenlabs",[279],{"id":12,"title":13,"slug":49},{"slug":281,"title":282,"logo":283,"baseline":284,"categories":285},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[286,287],{"id":61,"title":62,"slug":63},{"id":117,"title":118,"slug":119},{"uuid":289,"title":290,"description":291,"canonical_path":292,"image":293,"width":294,"height":295,"image_alt":296,"kind":46,"categories":297,"app":299},"4ef6e71d-fb98-43f7-bce7-52cbee6826a9","Maze UI component","A 'Get started' section for a user research platform, outlining steps and showcasing various study types with visual examples.","\u002Fexamples\u002Fapps\u002Fmaze\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F27ef2c55-6950-408e-9ec0-038920bbfff0.png",2334,853,"UI component from Maze",[298],{"id":12,"title":13,"slug":49},{"slug":300,"title":301,"logo":302,"baseline":303,"categories":304},"maze","Maze","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29732693-68cb-43d3-8a42-056936993f0f.png","Rapid testing for modern teams",[305,309,313],{"id":306,"title":307,"slug":308},8,"Design","design",{"id":310,"title":311,"slug":312},69,"Surveys","surveys",{"id":314,"title":315,"slug":316},104,"User Research","user-research",{"uuid":318,"title":319,"description":320,"canonical_path":321,"image":322,"width":323,"height":324,"image_alt":325,"kind":46,"categories":326,"app":328},"10b55804-b365-4349-977b-d10f0672b425","Mocha UI component","A card explaining the concept of \"Production\" within an application, featuring a title, explanatory text, a \"Learn more\" link, pagination, and a \"Next\" button.","\u002Fexamples\u002Fapps\u002Fmocha\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff0b7caac-4adf-4698-908e-0c6f877b861d.png",622,358,"UI component from Mocha",[327],{"id":12,"title":13,"slug":49},{"slug":329,"title":330,"logo":331,"baseline":332,"categories":333},"mocha","Mocha","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd9d4dea4-3f03-4b97-b9a1-d776442fd100.png","Create beautiful websites with words, not code",[334,335,336],{"id":241,"title":242,"slug":243},{"id":61,"title":62,"slug":63},{"id":245,"title":246,"slug":247},[],[339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384],{"label":340,"to":341},"Onboarding Checklist","\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":343,"to":344},"Setup Wizard","\u002Fexamples\u002Fscreens\u002Fsetup-wizard",{"label":346,"to":347},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":349,"to":350},"AI Chat","\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":352,"to":353},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":355,"to":356},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":358,"to":359},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":361,"to":362},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":364,"to":365},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":367,"to":368},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":370,"to":371},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":373,"to":374},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":376,"to":377},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":379,"to":380},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":382,"to":383},"Maze design examples","\u002Fexamples\u002Fapps\u002Fmaze",{"label":385,"to":386},"Mocha design examples","\u002Fexamples\u002Fapps\u002Fmocha",{"published_at":388,"updated_at":389},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]