[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Freorder":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":276,"links":277,"dates":317},"\u002Fexamples\u002Fcomponents\u002Freorder","collection","components",true,{"example_count":9,"app_count":10},11,9,{"id":12,"title":13,"description":14},251,"Reorder","Explore how interfaces let people rearrange a sequence. Look at handles, movement controls, and position cues within lists of items that can change order.",{"title":16,"description":17,"og_image":18},"Reorder UI examples - Nicelydone","Reorder UI design examples from SaaS apps. Explore how interfaces let people rearrange a sequence. Look at handles, movement controls, and position cues…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1502b07c-85b1-40db-b327-c864f5369356.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Reorder UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Reorder UI design examples from SaaS apps. Explore how interfaces let people rearrange a sequence. Look at handles, movement controls, and position cues within lists of items that can change order.",[32],{"title":33,"description":14,"links":34},"About Reorder",[],[36],"11 UI components",[38,72,97,120,146,180,205,228,251],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"1f328c2b-8745-49ff-acd5-c2818e04ce5e","Score options builder","A list of configurable score options, each with thumbs up\u002Fdown toggles, a text label, a percentage value, a delete button, and a drag handle. A button below allows adding new options.","\u002Fexamples\u002Fapps\u002Fbraintrust\u002Fcomponents",1285,616,"Score options builder from Braintrust","component",[48],{"id":12,"title":13,"slug":49},"reorder",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"braintrust","Braintrust","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fbraintrust-d86c86ag.png","Ship LLM products that work",[56,60,64,68],{"id":57,"title":58,"slug":59},37,"Developer APIs","developer-apis",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},16,"Monitoring","monitoring",{"id":69,"title":70,"slug":71},48,"Developer Tools","developer-tools",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"704a0724-a149-44f5-b0f3-6b8f87736e79","Drag and drop list reordering","A sidebar navigation list showing an item being dragged and dropped to a new position. A blue line indicates the drop target location.","\u002Fexamples\u002Fapps\u002Fsuperlist\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F76501b9f-65e2-4ea2-ae95-2cbd35f582fd.png",629,649,"Drag and drop list reordering from Superlist",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"superlist","Superlist","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsuperlist-159870df.png","Supercharged productivity",[89,93],{"id":90,"title":91,"slug":92},29,"Task Management","task-management",{"id":94,"title":95,"slug":96},30,"Productivity","productivity",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"50f60727-c73a-47cc-876a-fa2248fd22a6","Task board drag and drop","A kanban-style task board showing a task card being dragged from one column to another.","\u002Fexamples\u002Fapps\u002Ftodoist\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F22c188cb-dae5-4ce2-a73c-290efc935165.png",1360,936,"Task board drag and drop from Todoist",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"todoist","Todoist","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftodoist-3d6ecdba.png","The to do list to organize work & life",[114,115,116],{"id":90,"title":91,"slug":92},{"id":94,"title":95,"slug":96},{"id":117,"title":118,"slug":119},23,"Collaboration","collaboration",{"uuid":121,"title":122,"description":123,"canonical_path":124,"image":125,"width":126,"height":127,"image_alt":128,"kind":46,"categories":129,"app":131},"d857d4dd-b31f-4315-aec3-0fe244b7896d","Fibery UI component","A modal with filter options.","\u002Fexamples\u002Fapps\u002Ffibery\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F42edb03e-b9a3-40ae-aedb-3e81af55e285.png",818,1042,"UI component from Fibery",[130],{"id":12,"title":13,"slug":49},{"slug":132,"title":133,"logo":134,"baseline":135,"categories":136},"fibery","Fibery","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffibery-eb0f19ed.png","Build your own work & knowledge hub",[137,141,145],{"id":138,"title":139,"slug":140},22,"Knowledge Management","knowledge-management",{"id":142,"title":143,"slug":144},86,"Product management","product-management",{"id":117,"title":118,"slug":119},{"uuid":147,"title":148,"description":149,"canonical_path":150,"image":151,"width":152,"height":153,"image_alt":154,"kind":46,"categories":155,"app":157},"c6203663-8953-444b-8b8a-9e9926eea82b","Webflow UI component","A modal with a list of style options","\u002Fexamples\u002Fapps\u002Fwebflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff03eb099-9096-4e0a-954c-13a69f0308f0.png",611,1115,"UI component from Webflow",[156],{"id":12,"title":13,"slug":49},{"slug":158,"title":159,"logo":160,"baseline":161,"categories":162},"webflow","Webflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fwebflow-d8c55605.png","Responsive web design tool, CMS, and hosting platform",[163,167,171,175,179],{"id":164,"title":165,"slug":166},96,"No code","no-code",{"id":168,"title":169,"slug":170},6,"Publishing","publishing",{"id":172,"title":173,"slug":174},7,"Web Development","web-development",{"id":176,"title":177,"slug":178},8,"Design","design",{"id":117,"title":118,"slug":119},{"uuid":181,"title":182,"description":183,"canonical_path":184,"image":185,"width":186,"height":187,"image_alt":188,"kind":46,"categories":189,"app":191},"64038ed5-9c43-4e57-8fee-c34fde121a28","Luma UI component","A modal with two options","\u002Fexamples\u002Fapps\u002Fluma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F75b8f83c-cd93-4441-9919-512768033cf8.png",1022,335,"UI component from Luma",[190],{"id":12,"title":13,"slug":49},{"slug":192,"title":193,"logo":194,"baseline":195,"categories":196},"luma","Luma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fluma-64c4b80f.png","Delightful events start here.",[197,201],{"id":198,"title":199,"slug":200},26,"Events","events",{"id":202,"title":203,"slug":204},4,"Ticketing","ticketing",{"uuid":206,"title":207,"description":208,"canonical_path":209,"image":210,"width":211,"height":212,"image_alt":213,"kind":46,"categories":214,"app":216},"ccb3e1e1-f9fc-4f29-8ba3-8947f401afcd","Kitemaker UI component","A modal to set impact levels","\u002Fexamples\u002Fapps\u002Fkitemaker\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff7639427-f3ce-4b7d-8de8-7d09aaeeae95.png",1716,628,"UI component from Kitemaker",[215],{"id":12,"title":13,"slug":49},{"slug":217,"title":218,"logo":219,"baseline":220,"categories":221},"kitemaker","Kitemaker","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fkitemaker-cfea7794.png","Build better software. Together.",[222,223,224],{"id":142,"title":143,"slug":144},{"id":90,"title":91,"slug":92},{"id":225,"title":226,"slug":227},35,"Feedback","feedback",{"uuid":229,"title":230,"description":231,"canonical_path":232,"image":233,"width":234,"height":235,"image_alt":236,"kind":46,"categories":237,"app":239},"1af2e73d-ab8f-464b-b1f8-b42cee5eb35f","Draggable task list","A vertical list of tasks under a 'KICKOFF' heading. One of the items, 'Sign your quote', is currently being dragged, showing a floating state with a drop shadow, while its original position is faded out.","\u002Fexamples\u002Fapps\u002Farrows\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F003b075e-d67d-4fe8-9023-cdfc2a408fff.png",790,637,"Draggable task list from Arrows",[238],{"id":12,"title":13,"slug":49},{"slug":240,"title":241,"logo":242,"baseline":243,"categories":244},"arrows","Arrows","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Farrows-aff15ff3.png","The collaborative customer onboarding platform built for HubSpot",[245,249,250],{"id":246,"title":247,"slug":248},53,"CRM","crm",{"id":117,"title":118,"slug":119},{"id":90,"title":91,"slug":92},{"uuid":252,"title":253,"description":254,"canonical_path":255,"image":256,"width":257,"height":258,"image_alt":259,"kind":46,"categories":260,"app":262},"8189d3bf-ffea-494a-8a55-f57c4f46026f","Empty State Cards","Two side-by-side cards displaying empty states for visitor feeds. Each card features a header, a stylized illustration of empty list items, a title, and a descriptive message explaining the empty state.","\u002Fexamples\u002Fapps\u002Fservicebell\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f07ee34-169a-4c4b-8894-0e707a8c0fea.png",1529,1247,"Empty State Cards from ServiceBell",[261],{"id":12,"title":13,"slug":49},{"slug":263,"title":264,"logo":265,"baseline":266,"categories":267},"servicebell","ServiceBell","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fservicebell-132263c9.png","Add live human connection to your website",[268,272],{"id":269,"title":270,"slug":271},47,"Customer Service","customer-service",{"id":273,"title":274,"slug":275},82,"Communication","communication",[],[278,281,284,287,290,293,296,299,302,305,308,311,314],{"label":279,"to":280},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":282,"to":283},"Settings","\u002Fexamples\u002Fscreens\u002Fsettings",{"label":285,"to":286},"Drag & Drop","\u002Fexamples\u002Fscreens\u002Fdrag-and-drop",{"label":288,"to":289},"Table","\u002Fexamples\u002Fscreens\u002Ftable",{"label":291,"to":292},"Braintrust design examples","\u002Fexamples\u002Fapps\u002Fbraintrust",{"label":294,"to":295},"Superlist design examples","\u002Fexamples\u002Fapps\u002Fsuperlist",{"label":297,"to":298},"Todoist design examples","\u002Fexamples\u002Fapps\u002Ftodoist",{"label":300,"to":301},"Fibery design examples","\u002Fexamples\u002Fapps\u002Ffibery",{"label":303,"to":304},"Webflow design examples","\u002Fexamples\u002Fapps\u002Fwebflow",{"label":306,"to":307},"Luma design examples","\u002Fexamples\u002Fapps\u002Fluma",{"label":309,"to":310},"Kitemaker design examples","\u002Fexamples\u002Fapps\u002Fkitemaker",{"label":312,"to":313},"Arrows design examples","\u002Fexamples\u002Fapps\u002Farrows",{"label":315,"to":316},"ServiceBell design examples","\u002Fexamples\u002Fapps\u002Fservicebell",{"published_at":318,"updated_at":319},"2022-08-22T18:14:38.000Z","2026-09-23T00:10:07.000Z"]