[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fsorting-filtering":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":333,"links":334,"dates":380},"\u002Fexamples\u002Fcomponents\u002Fsorting-filtering","collection","components",true,{"example_count":9,"app_count":10},263,109,{"id":12,"title":13,"description":14},225,"Sorting & filtering","See how interfaces place sorting and filtering controls beside a collection. Explore how selected conditions, option menus, and reset actions fit into the available space.",{"title":16,"description":17,"og_image":18},"Sorting & filtering UI examples - Nicelydone","Sorting & filtering UI design examples from SaaS apps. See how interfaces place sorting and filtering controls beside a collection. Explore how selected…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F30e8b90f-7d5a-468f-81f0-a01926ccd345.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Sorting & filtering UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Sorting & filtering UI design examples from SaaS apps. See how interfaces place sorting and filtering controls beside a collection. Explore how selected conditions, option menus, and reset actions fit into the…",[32],{"title":33,"description":14,"links":34},"About Sorting & filtering",[],[36],"263 UI components",[38,72,93,122,141,162,187,217,248,274,303],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"5849b0e1-d4a9-4b7c-b438-8d72e0546d86","Airbnb UI component","A modal displaying filter options for experience types with a grid layout of selectable categories.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents",1297,1323,"UI component from Airbnb","component",[48],{"id":12,"title":13,"slug":49},"sorting-filtering",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[56,60,64,68],{"id":57,"title":58,"slug":59},5,"Travel","travel",{"id":61,"title":62,"slug":63},12,"Hospitality","hospitality",{"id":65,"title":66,"slug":67},17,"Peer to peer","peer-to-peer",{"id":69,"title":70,"slug":71},18,"Marketplace","marketplace",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"c0ce59b5-bd5f-4b7f-a8b9-cfa7d0d3efee","Cascading Filter Menu","Cascading popover menu for filtering the transactions list by account or other attributes with search and multi-select","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa6c4c03f-eaf8-4c30-a2a3-9d17907bdfc4.png",1426,1048,"Cascading Filter Menu from Copilot",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[89],{"id":90,"title":91,"slug":92},36,"Finance","finance",{"uuid":94,"title":95,"description":96,"canonical_path":97,"image":98,"width":99,"height":100,"image_alt":101,"kind":46,"categories":102,"app":104},"74a06872-281f-483c-afb3-89ca71dac1b7","Filter bar","Enables filtering sessions by status and ID in a list view","\u002Fexamples\u002Fapps\u002Fbrowserbase\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0d878376-4c3b-41f1-9551-15bf77fd7537.png",914,195,"Filter bar from Browserbase",[103],{"id":12,"title":13,"slug":49},{"slug":105,"title":106,"logo":107,"baseline":108,"categories":109},"browserbase","Browserbase","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3a57506b-6fe4-4f0c-85bc-b70ea12d0216.png","Give your agents access to the whole web.",[110,114,118],{"id":111,"title":112,"slug":113},48,"Developer Tools","developer-tools",{"id":115,"title":116,"slug":117},80,"Artificial Intelligence","artificial-intelligence",{"id":119,"title":120,"slug":121},37,"Developer APIs","developer-apis",{"uuid":123,"title":124,"description":125,"canonical_path":126,"image":127,"width":128,"height":129,"image_alt":130,"kind":46,"categories":131,"app":133},"ca4cc059-904f-4d52-9214-df9f9342ea2a","Elevenlabs UI component","A horizontal row of interactive controls for data filtering and view customization, including options for date range, granularity, grouping, and general filtering.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcbe9a4b6-117f-4114-a48b-2b3566fa6c0c.png",1830,305,"UI component from Elevenlabs",[132],{"id":12,"title":13,"slug":49},{"slug":134,"title":135,"logo":136,"baseline":137,"categories":138},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[139,140],{"id":115,"title":116,"slug":117},{"id":119,"title":120,"slug":121},{"uuid":142,"title":143,"description":144,"canonical_path":145,"image":146,"width":147,"height":148,"image_alt":149,"kind":46,"categories":150,"app":152},"cd4725f8-9ab1-4afc-b2c2-d1e405e7019c","Aboard UI component","A time-off management interface showing filter options and a popover menu for availability types.","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcf628868-5f74-41b7-adad-70573de69554.png",880,422,"UI component from Aboard",[151],{"id":12,"title":13,"slug":49},{"slug":153,"title":154,"logo":155,"baseline":156,"categories":157},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[158],{"id":159,"title":160,"slug":161},10,"Human resources","human-resources",{"uuid":163,"title":164,"description":165,"canonical_path":166,"image":167,"width":168,"height":169,"image_alt":170,"kind":46,"categories":171,"app":173},"523b1917-c583-4d67-a120-e2e39fc5a67e","Missive UI component","A nested filter menu with search functionality for mailboxes and status options in a dark mode application interface.","\u002Fexamples\u002Fapps\u002Fmissive\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fefb735d7-3505-4a2d-9860-2d0545e39fe6.png",1392,1535,"UI component from Missive",[172],{"id":12,"title":13,"slug":49},{"slug":174,"title":175,"logo":176,"baseline":177,"categories":178},"missive","Missive","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmissive-3771692f.png","Team email, chat & tasks",[179,183],{"id":180,"title":181,"slug":182},23,"Collaboration","collaboration",{"id":184,"title":185,"slug":186},92,"Email","email",{"uuid":188,"title":189,"description":190,"canonical_path":191,"image":192,"width":193,"height":194,"image_alt":195,"kind":46,"categories":196,"app":198},"e6d72199-9949-4718-a5ce-871c7e96a287","Linear UI component","User interface displaying a section for \"My issues\" with filtering and sorting options.","\u002Fexamples\u002Fapps\u002Flinear\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff2dffa7e-1e21-444e-b3ab-bfa63d5a08fb.png",2547,312,"UI component from Linear",[197],{"id":12,"title":13,"slug":49},{"slug":199,"title":200,"logo":201,"baseline":202,"categories":203},"linear","Linear","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flinear-c6809667.png","The issue tracking tool you'll enjoy using",[204,208,212,213],{"id":205,"title":206,"slug":207},29,"Task Management","task-management",{"id":209,"title":210,"slug":211},30,"Productivity","productivity",{"id":180,"title":181,"slug":182},{"id":214,"title":215,"slug":216},86,"Product management","product-management",{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":223,"height":224,"image_alt":225,"kind":46,"categories":226,"app":228},"ffe6756b-f6a5-4f47-996d-b9619a55b400","Bird UI component","A task management interface with navigation tabs, filters, and view options.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2d31a150-2ff2-4488-984f-4f414cccacae.png",1778,440,"UI component from Bird",[227],{"id":12,"title":13,"slug":49},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[234,238,239,243,247],{"id":235,"title":236,"slug":237},25,"Marketing","marketing",{"id":119,"title":120,"slug":121},{"id":240,"title":241,"slug":242},53,"CRM","crm",{"id":244,"title":245,"slug":246},68,"SMS","sms",{"id":184,"title":185,"slug":186},{"uuid":249,"title":250,"description":251,"canonical_path":252,"image":253,"width":254,"height":255,"image_alt":256,"kind":46,"categories":257,"app":259},"232afdac-1f51-41f9-85c0-9ec1e2878c97","Super UI component","A user interface displaying a list of members with search, filter, export, and invite options, including a filter popover with toggle switches.","\u002Fexamples\u002Fapps\u002Fsuper-work\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faab8478d-cd54-4ad5-ba97-486be282c30e.png",2080,537,"UI component from Super",[258],{"id":12,"title":13,"slug":49},{"slug":260,"title":261,"logo":262,"baseline":263,"categories":264},"super-work","Super","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F18c1a329-f193-4400-81ba-b36a605c9c39.png","AI search and agents, across all your company tools",[265,269,273],{"id":266,"title":267,"slug":268},22,"Knowledge Management","knowledge-management",{"id":270,"title":271,"slug":272},55,"Search engine","search-engine",{"id":115,"title":116,"slug":117},{"uuid":275,"title":276,"description":277,"canonical_path":278,"image":279,"width":280,"height":281,"image_alt":282,"kind":46,"categories":283,"app":285},"81220cbd-2780-4eed-aacc-0a0842c24dbd","Meetup UI component","A filter popover allowing users to specify a numerical value and a time period for data filtering.","\u002Fexamples\u002Fapps\u002Fmeetup\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcb272b1f-bf98-4c93-8940-b91453705b2f.png",842,661,"UI component from Meetup",[284],{"id":12,"title":13,"slug":49},{"slug":286,"title":287,"logo":288,"baseline":289,"categories":290},"meetup","Meetup","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F123bdad2-d673-4999-b9a4-477472b558c3.png","Find local groups, events, and activities near you",[291,295,299],{"id":292,"title":293,"slug":294},1,"Communities","communities",{"id":296,"title":297,"slug":298},14,"Social","social",{"id":300,"title":301,"slug":302},26,"Events","events",{"uuid":304,"title":305,"description":306,"canonical_path":307,"image":308,"width":309,"height":310,"image_alt":311,"kind":46,"categories":312,"app":314},"2bb40a7e-d7f0-4351-820c-9a3029a501ff","Dovetail UI component","A user interface displaying filter options with an active popover for channel name filtering.","\u002Fexamples\u002Fapps\u002Fdovetail\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff4e90948-bad7-4460-aa54-548de0d77774.png",1245,436,"UI component from Dovetail",[313],{"id":12,"title":13,"slug":49},{"slug":315,"title":316,"logo":317,"baseline":318,"categories":319},"dovetail","Dovetail","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6b47c81d-b89f-43c4-9087-0c1e1df518d7.png","Helps you with the key steps of UX research",[320,324,325,329],{"id":321,"title":322,"slug":323},8,"Design","design",{"id":266,"title":267,"slug":268},{"id":326,"title":327,"slug":328},35,"Feedback","feedback",{"id":330,"title":331,"slug":332},104,"User Research","user-research",[],[335,338,341,344,347,350,353,356,359,362,365,368,371,374,377],{"label":336,"to":337},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":339,"to":340},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":342,"to":343},"Empty State","\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":345,"to":346},"Table","\u002Fexamples\u002Fscreens\u002Ftable",{"label":348,"to":349},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":351,"to":352},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":354,"to":355},"Browserbase design examples","\u002Fexamples\u002Fapps\u002Fbrowserbase",{"label":357,"to":358},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":360,"to":361},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":363,"to":364},"Missive design examples","\u002Fexamples\u002Fapps\u002Fmissive",{"label":366,"to":367},"Linear design examples","\u002Fexamples\u002Fapps\u002Flinear",{"label":369,"to":370},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":372,"to":373},"Super design examples","\u002Fexamples\u002Fapps\u002Fsuper-work",{"label":375,"to":376},"Meetup design examples","\u002Fexamples\u002Fapps\u002Fmeetup",{"label":378,"to":379},"Dovetail design examples","\u002Fexamples\u002Fapps\u002Fdovetail",{"published_at":381,"updated_at":382},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]