[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fknock\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":218,"links":219,"dates":256},"\u002Fexamples\u002Fapps\u002Fknock\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Knock UI components examples - Nicelydone","Browse Knock UI component design examples. Preview individual interface elements and explore related component categories. Notifications infrastructure for…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe115b8cc-31aa-401a-b508-bf84b6c764f5.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},"Knock design examples","\u002Fexamples\u002Fapps\u002Fknock",{"label":23,"to":4},"Knock UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Knock UI component design examples. Preview individual interface elements and explore related component categories. Notifications infrastructure for developers",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Knock","knock","Notifications infrastructure for developers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fknock-b9085719.png","https:\u002F\u002Fknock.app","knocklabs",[37,41,45],{"id":38,"title":39,"slug":40},48,"Developer Tools","developer-tools",{"id":42,"title":43,"slug":44},37,"Developer APIs","developer-apis",{"id":46,"title":47,"slug":48},42,"Messaging","messaging",[50,65,80,95,105,120,135,149,164,179,191,206],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"e115b8cc-31aa-401a-b508-bf84b6c764f5","Success Toast","A success toast notification confirming an environment switch, featuring a green checkmark icon, a descriptive message, and a close button.",883,267,"Success Toast from Knock","component",[59],{"id":60,"title":61,"slug":62},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":67,"description":68,"canonical_path":4,"image":69,"width":70,"height":71,"image_alt":72,"kind":57,"categories":73,"app":78},"023ed918-a608-4a59-b1a1-ac8124dafb73","Environments table","A simple data table listing deployment environments with their name, status, and ID. It includes a copy-to-clipboard icon for the ID and an overflow menu for each row.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F023ed918-a608-4a59-b1a1-ac8124dafb73.png",2651,488,"Environments table from Knock",[74],{"id":75,"title":76,"slug":77},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":79},[],{"uuid":81,"title":82,"description":83,"canonical_path":4,"image":84,"width":85,"height":86,"image_alt":87,"kind":57,"categories":88,"app":93},"1afb3800-c412-407e-98d2-92000b41071a","Integration card","A card component displaying an integration option with a logo, title, description, and a configuration button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1afb3800-c412-407e-98d2-92000b41071a.png",1458,520,"Integration card from Knock",[89],{"id":90,"title":91,"slug":92},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":94},[],{"uuid":96,"title":97,"description":98,"canonical_path":4,"image":99,"width":85,"height":86,"image_alt":100,"kind":57,"categories":101,"app":103},"b0101532-a26e-46f0-b68d-4ff3bd57cd5a","Integration upgrade card","A card displaying an integration option with a prompt to upgrade the user's plan to access it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb0101532-a26e-46f0-b68d-4ff3bd57cd5a.png","Integration upgrade card from Knock",[102],{"id":90,"title":91,"slug":92},{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":112,"kind":57,"categories":113,"app":118},"3f480145-a006-4b64-b2bc-c8451db5967e","Tabs with badges","A horizontal tab navigation component with three tabs. Two tabs include numeric badges indicating counts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3f480145-a006-4b64-b2bc-c8451db5967e.png",1319,322,"Tabs with badges from Knock",[114],{"id":115,"title":116,"slug":117},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":57,"categories":128,"app":133},"43d1a19a-468c-42b1-8d4d-9a4ed4ece55f","Destructive confirmation buttons","A button group containing a secondary cancel button and a primary destructive action button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F43d1a19a-468c-42b1-8d4d-9a4ed4ece55f.png",701,184,"Destructive confirmation buttons from Knock",[129],{"id":130,"title":131,"slug":132},277,"Button group","button-group",{"slug":31,"title":30,"logo":33,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":140,"height":141,"image_alt":142,"kind":57,"categories":143,"app":147},"068f7ef6-fced-46ff-be1f-bc1e9893c079","Segmented control","A segmented control with two options: Request and Response. The Request option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F068f7ef6-fced-46ff-be1f-bc1e9893c079.png",528,196,"Segmented control from Knock",[144],{"id":145,"title":137,"slug":146},218,"segmented-control",{"slug":31,"title":30,"logo":33,"categories":148},[],{"uuid":150,"title":151,"description":152,"canonical_path":4,"image":153,"width":154,"height":155,"image_alt":156,"kind":57,"categories":157,"app":162},"8de3c340-9e30-473e-bb51-3f57aac285f7","Information Tooltip","A dark-themed tooltip providing contextual help text, appearing next to an information icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8de3c340-9e30-473e-bb51-3f57aac285f7.png",740,141,"Information Tooltip from Knock",[158],{"id":159,"title":160,"slug":161},254,"Tooltip","tooltip-element",{"slug":31,"title":30,"logo":33,"categories":163},[],{"uuid":165,"title":166,"description":167,"canonical_path":4,"image":168,"width":169,"height":170,"image_alt":171,"kind":57,"categories":172,"app":177},"79003a68-4fa3-4e08-b757-a409815f3130","Filter popover","A popover menu for applying filters, containing a list of checkbox options and actions to clear or apply the selection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79003a68-4fa3-4e08-b757-a409815f3130.png",648,610,"Filter popover from Knock",[173],{"id":174,"title":175,"slug":176},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":181,"description":182,"canonical_path":4,"image":183,"width":184,"height":185,"image_alt":186,"kind":57,"categories":187,"app":189},"8891469d-5c3f-4f7f-908f-2913ffccd32e","Copy to clipboard tooltip","A tooltip displaying 'Copied!' after a user interacts with a copy action next to a numeric string.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8891469d-5c3f-4f7f-908f-2913ffccd32e.png",336,260,"Copy to clipboard tooltip from Knock",[188],{"id":159,"title":160,"slug":161},{"slug":31,"title":30,"logo":33,"categories":190},[],{"uuid":192,"title":193,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":198,"kind":57,"categories":199,"app":204},"9d5d4cd0-c946-40b5-859d-fea963f71623","Condition builder","A query builder interface for defining execution conditions. It features a sentence-like structure with inline inputs for variables, operators, and values, followed by buttons to add more conditions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9d5d4cd0-c946-40b5-859d-fea963f71623.png",1058,413,"Condition builder from Knock",[200],{"id":201,"title":202,"slug":203},217,"Query builder","query-builder",{"slug":31,"title":30,"logo":33,"categories":205},[],{"uuid":207,"title":208,"description":209,"canonical_path":4,"image":210,"width":211,"height":212,"image_alt":213,"kind":57,"categories":214,"app":216},"d3211add-cbff-4202-8202-60e123a03ec5","Condition builder form","A form section for building a logical condition, containing dropdowns for condition type and operator, and text inputs for data property and value.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd3211add-cbff-4202-8202-60e123a03ec5.png",1056,969,"Condition builder form from Knock",[215],{"id":201,"title":202,"slug":203},{"slug":31,"title":30,"logo":33,"categories":217},[],[],[220,223,226,229,232,235,238,240,244,248,252],{"label":221,"to":222},"Knock product screens","\u002Fexamples\u002Fapps\u002Fknock\u002Fscreens",{"label":224,"to":225},"Knock marketing pages","\u002Fexamples\u002Fapps\u002Fknock\u002Fmarketing",{"label":227,"to":228},"Knock user flows","\u002Fexamples\u002Fapps\u002Fknock\u002Fflows",{"label":230,"to":231},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":233,"to":234},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":236,"to":237},"Messaging app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmessaging",{"label":239,"to":18},"All SaaS app examples",{"label":241,"to":242,"description":243},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":245,"to":246,"description":247},"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":249,"to":250,"description":251},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":253,"to":254,"description":255},"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":257,"updated_at":258},"2023-02-27T00:03:39.000Z","2026-09-13T13:02:39.000Z"]