[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fquery-builder":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":328,"links":329,"dates":378},"\u002Fexamples\u002Fcomponents\u002Fquery-builder","collection","components",true,{"example_count":9,"app_count":10},59,33,{"id":12,"title":13,"description":14},217,"Query builder","See how interfaces let people express a query through controls. Explore how fields, operators, values, and condition groups are arranged to show the query structure.",{"title":16,"description":17,"og_image":18},"Query builder UI examples - Nicelydone","Query builder UI design examples from SaaS apps. See how interfaces let people express a query through controls. Explore how fields, operators, values, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F576589f8-d1bf-4a73-912d-23a01a565a92.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Query builder UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Query builder UI design examples from SaaS apps. See how interfaces let people express a query through controls. Explore how fields, operators, values, and condition groups are arranged to show the query…",[32],{"title":33,"description":14,"links":34},"About Query builder",[],[36],"59 UI components",[38,60,85,114,144,172,191,217,244,264,286,304],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"66a0b974-9110-4e07-985d-cb58ba2668ef","Mixpanel UI component","A data query builder interface for analyzing user behavior and events over time.","\u002Fexamples\u002Fapps\u002Fmixpanel\u002Fcomponents",2652,1059,"UI component from Mixpanel","component",[48],{"id":12,"title":13,"slug":49},"query-builder",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"mixpanel","Mixpanel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6591e7aa-86c8-4da2-8c52-c70f46a86bbb.png","Product analytics for mobile, web, & more",[56],{"id":57,"title":58,"slug":59},46,"Analytics","analytics",{"uuid":61,"title":62,"description":63,"canonical_path":64,"image":65,"width":66,"height":67,"image_alt":68,"kind":46,"categories":69,"app":71},"dbc22fdc-ce2d-4455-9430-bda5b3373c52","Attio UI component","The screenshot displays a workflow diagram with two connected actions.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe685b6ed-4ba4-4af0-a6b4-c3fd49dafa78.png",851,931,"UI component from Attio",[70],{"id":12,"title":13,"slug":49},{"slug":72,"title":73,"logo":74,"baseline":75,"categories":76},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[77,81],{"id":78,"title":79,"slug":80},53,"CRM","crm",{"id":82,"title":83,"slug":84},80,"Artificial Intelligence","artificial-intelligence",{"uuid":86,"title":87,"description":88,"canonical_path":89,"image":90,"width":91,"height":92,"image_alt":93,"kind":46,"categories":94,"app":96},"19c8b345-982f-4531-866e-edbac8e6371e","Loops UI component","The image shows a flowchart diagram outlining a process with steps like 'Contact added', 'Timer', 'Experiment', 'Control', 'Variant', and 'Loop completed'.","\u002Fexamples\u002Fapps\u002Floops\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fae838eb6-9772-4300-a535-0ed7cad6fed5.png",1632,1650,"UI component from Loops",[95],{"id":12,"title":13,"slug":49},{"slug":97,"title":98,"logo":99,"baseline":100,"categories":101},"loops","Loops","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Floops-4f4bed58.png","The email platform for modern SaaS",[102,106,110],{"id":103,"title":104,"slug":105},92,"Email","email",{"id":107,"title":108,"slug":109},27,"Email Newsletters","email-newsletters",{"id":111,"title":112,"slug":113},25,"Marketing","marketing",{"uuid":115,"title":116,"description":117,"canonical_path":118,"image":119,"width":120,"height":121,"image_alt":122,"kind":46,"categories":123,"app":125},"3cc40038-6a4d-44c0-be89-7324829b1983","Circleback UI component","A modal for setting up automation triggers.","\u002Fexamples\u002Fapps\u002Fcircleback\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F82a70007-e0c0-4465-8d65-b4dadb4bb393.png",1552,1774,"UI component from Circleback",[124],{"id":12,"title":13,"slug":49},{"slug":126,"title":127,"logo":128,"baseline":129,"categories":130},"circleback","Circleback","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcircleback-srajedn3.png","Unbelievably good meeting notes",[131,135,139,143],{"id":132,"title":133,"slug":134},30,"Productivity","productivity",{"id":136,"title":137,"slug":138},82,"Communication","communication",{"id":140,"title":141,"slug":142},22,"Knowledge Management","knowledge-management",{"id":82,"title":83,"slug":84},{"uuid":145,"title":146,"description":147,"canonical_path":148,"image":149,"width":67,"height":150,"image_alt":151,"kind":46,"categories":152,"app":154},"fbbe2351-2564-4f45-ad81-cb20319458d6","Glide UI component","The screenshot shows a modal for setting visibility conditions, with dropdown menus and options to add conditions.","\u002Fexamples\u002Fapps\u002Fglide\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9abbb972-bcbd-4ea5-a1d9-9cdaae6ae6e4.png",940,"UI component from Glide",[153],{"id":12,"title":13,"slug":49},{"slug":155,"title":156,"logo":157,"baseline":158,"categories":159},"glide","Glide","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fglide-688214ec.png","Create powerful apps and websites, without code",[160,164,168],{"id":161,"title":162,"slug":163},7,"Web Development","web-development",{"id":165,"title":166,"slug":167},54,"Mobile","mobile",{"id":169,"title":170,"slug":171},96,"No code","no-code",{"uuid":173,"title":174,"description":175,"canonical_path":176,"image":177,"width":178,"height":179,"image_alt":180,"kind":46,"categories":181,"app":183},"38c27fd2-648c-43f0-990f-8cf12b33ed7b","Cobot UI component","The UI shows a morning summary setup with triggers and actions.","\u002Fexamples\u002Fapps\u002Fcobot\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1468dacf-3eb4-4a1a-83f3-79dc31001f9c.png",1712,1133,"UI component from Cobot",[182],{"id":12,"title":13,"slug":49},{"slug":184,"title":185,"logo":186,"baseline":187,"categories":188},"cobot","Cobot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcobot-cfgifddahsrq.png","The first to-do app that does it for you",[189,190],{"id":82,"title":83,"slug":84},{"id":132,"title":133,"slug":134},{"uuid":192,"title":193,"description":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"6f5d859c-d76f-4c47-baae-9cb0ff0104a3","Reflag UI component","The screenshot displays a rules configuration interface.","\u002Fexamples\u002Fapps\u002Freflag\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff20e9802-96f3-4f6c-9cd4-a0b9ec72dd99.png",1792,967,"UI component from Reflag",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"reflag","Reflag","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freflag-2wn2m5zj.png","Feature flags for SaaS that run on TypeScript",[208,212,216],{"id":209,"title":210,"slug":211},48,"Developer Tools","developer-tools",{"id":213,"title":214,"slug":215},35,"Feedback","feedback",{"id":57,"title":58,"slug":59},{"uuid":218,"title":219,"description":220,"canonical_path":221,"image":222,"width":223,"height":224,"image_alt":225,"kind":46,"categories":226,"app":228},"d4c8d883-cf67-4880-87c6-570384e323e7","Zapier UI component","The screenshot displays a user interface for defining logic within a system, likely for automating actions based on user interactions.","\u002Fexamples\u002Fapps\u002Fzapier\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa883831e-6b14-48e5-a968-758732ee3c24.png",1063,779,"UI component from Zapier",[227],{"id":12,"title":13,"slug":49},{"slug":229,"title":230,"logo":231,"baseline":232,"categories":233},"zapier","Zapier","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fzapier-6740bd20.png","Connect Your Apps and Automate Workflows",[234,238,239,240],{"id":235,"title":236,"slug":237},37,"Developer APIs","developer-apis",{"id":209,"title":210,"slug":211},{"id":82,"title":83,"slug":84},{"id":241,"title":242,"slug":243},105,"Workflow Automation","workflow-automation",{"uuid":245,"title":246,"description":247,"canonical_path":248,"image":249,"width":250,"height":251,"image_alt":252,"kind":46,"categories":253,"app":255},"7380b9f4-7f87-4221-a1ad-b73c811b5c77","Lindy UI component","A workflow diagram showing a sequence of actions triggered by an email.","\u002Fexamples\u002Fapps\u002Flindy\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6728f482-b421-49a1-8978-eed7cc8b4ed7.png",1600,958,"UI component from Lindy",[254],{"id":12,"title":13,"slug":49},{"slug":256,"title":257,"logo":258,"baseline":259,"categories":260},"lindy","Lindy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flindy-k2eius5s.png","Meet your AI assistant",[261,262,263],{"id":82,"title":83,"slug":84},{"id":132,"title":133,"slug":134},{"id":241,"title":242,"slug":243},{"uuid":265,"title":266,"description":267,"canonical_path":268,"image":269,"width":270,"height":271,"image_alt":272,"kind":46,"categories":273,"app":275},"97a039b9-fe7f-4eec-9c0e-3eb8e62dd200","Twenty UI component","A workflow diagram showing a sequence of actions triggered manually.","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2754e947-1fd9-4e18-9b85-af8e7f2e96df.png",732,1292,"UI component from Twenty",[274],{"id":12,"title":13,"slug":49},{"slug":276,"title":277,"logo":278,"baseline":279,"categories":280},"twenty","Twenty","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F958b58b6-f349-407c-8a71-bb683f68bcd2.png","The #1 Open-Source CRM",[281,282],{"id":78,"title":79,"slug":80},{"id":283,"title":284,"slug":285},45,"Open Source","open-source",{"uuid":287,"title":288,"description":289,"canonical_path":290,"image":291,"width":292,"height":293,"image_alt":294,"kind":46,"categories":295,"app":297},"ee75a3bf-36b2-4d13-b207-34aa678e4de5","Clay UI component","The screenshot displays a data flow diagram with three source nodes labeled 'Find people' and a destination node labeled 'Software developers and designers'.","\u002Fexamples\u002Fapps\u002Fclay\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5b9b55bd-f105-4136-b050-48c007486558.png",2420,796,"UI component from Clay",[296],{"id":12,"title":13,"slug":49},{"slug":298,"title":299,"logo":300,"baseline":301,"categories":302},"clay","Clay","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fclay-imneva1j.png","Be more thoughtful with the people in your network",[303],{"id":78,"title":79,"slug":80},{"uuid":305,"title":306,"description":307,"canonical_path":308,"image":309,"width":310,"height":91,"image_alt":311,"kind":46,"categories":312,"app":314},"13f63ab3-4d04-4e76-8dd5-207cd5ad127f","Mangomint UI component","A workflow diagram showing a sequence of actions triggered by an appointment completion, including a wait period, a check condition, sending text messages, and adding to an account balance.","\u002Fexamples\u002Fapps\u002Fmangomint\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F19783f05-7cb2-43bc-96e6-06f582c4947e.png",1595,"UI component from Mangomint",[313],{"id":12,"title":13,"slug":49},{"slug":315,"title":316,"logo":317,"baseline":318,"categories":319},"mangomint","Mangomint","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F25bad55a-e8c6-455f-a94a-ec8e1b845320.png","Everything you need to power your salon and spa",[320,324],{"id":321,"title":322,"slug":323},41,"Health and Wellness","health-and-wellness",{"id":325,"title":326,"slug":327},101,"Calendar","calendar",[],[330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375],{"label":331,"to":332},"Workflow Builder","\u002Fexamples\u002Fscreens\u002Fworkflow-builder",{"label":334,"to":335},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":337,"to":338},"Automation","\u002Fexamples\u002Fscreens\u002Fautomation",{"label":340,"to":341},"Settings","\u002Fexamples\u002Fscreens\u002Fsettings",{"label":343,"to":344},"Mixpanel design examples","\u002Fexamples\u002Fapps\u002Fmixpanel",{"label":346,"to":347},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":349,"to":350},"Loops design examples","\u002Fexamples\u002Fapps\u002Floops",{"label":352,"to":353},"Circleback design examples","\u002Fexamples\u002Fapps\u002Fcircleback",{"label":355,"to":356},"Glide design examples","\u002Fexamples\u002Fapps\u002Fglide",{"label":358,"to":359},"Cobot design examples","\u002Fexamples\u002Fapps\u002Fcobot",{"label":361,"to":362},"Reflag design examples","\u002Fexamples\u002Fapps\u002Freflag",{"label":364,"to":365},"Zapier design examples","\u002Fexamples\u002Fapps\u002Fzapier",{"label":367,"to":368},"Lindy design examples","\u002Fexamples\u002Fapps\u002Flindy",{"label":370,"to":371},"Twenty design examples","\u002Fexamples\u002Fapps\u002Ftwenty",{"label":373,"to":374},"Clay design examples","\u002Fexamples\u002Fapps\u002Fclay",{"label":376,"to":377},"Mangomint design examples","\u002Fexamples\u002Fapps\u002Fmangomint",{"published_at":379,"updated_at":380},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]