[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fhookdeck\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":48,"showcases":215,"links":216,"dates":235},"\u002Fexamples\u002Fapps\u002Fhookdeck\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Hookdeck UI components examples - Nicelydone","Browse Hookdeck UI component design examples. Preview individual interface elements and explore related component categories. A reliable event gateway for…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1f6f891b-db88-41e2-b3a4-4cc9b059ddcb.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},"Hookdeck design examples","\u002Fexamples\u002Fapps\u002Fhookdeck",{"label":23,"to":4},"Hookdeck UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Hookdeck UI component design examples. Preview individual interface elements and explore related component categories. A reliable event gateway for asynchronous applications",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":30,"categories":35},"Hookdeck","hookdeck","A reliable event gateway for asynchronous applications","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fhookdeck-314d3191.png","https:\u002F\u002Fhookdeck.com",[36,40,44],{"id":37,"title":38,"slug":39},37,"Developer APIs","developer-apis",{"id":41,"title":42,"slug":43},16,"Monitoring","monitoring",{"id":45,"title":46,"slug":47},48,"Developer Tools","developer-tools",[49,64,74,89,104,119,134,149,164,179,189,203],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"140f6ba3-0434-44b9-a8cc-2a1a02dd7eba","Settings toggle row","A settings row containing a title, a descriptive subtitle, and a toggle switch to turn a feature on or off.",1596,326,"Settings toggle row from Hookdeck","component",[58],{"id":59,"title":60,"slug":61},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":51,"description":66,"canonical_path":4,"image":67,"width":68,"height":69,"image_alt":55,"kind":56,"categories":70,"app":72},"ccb2be43-658c-4b00-892e-f931557ab8ab","A horizontal settings row with a title, description, and a toggle switch to enable or disable a feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6c5513a2-7617-4a2c-a453-f62b39cf808e.png",1594,331,[71],{"id":59,"title":60,"slug":61},{"slug":31,"title":30,"logo":33,"categories":73},[],{"uuid":75,"title":76,"description":77,"canonical_path":4,"image":78,"width":79,"height":80,"image_alt":81,"kind":56,"categories":82,"app":87},"96cdd426-2566-46a6-8f69-6ca040489bf8","Metered Usage Section","A section displaying metered usage for requests and events, using progress bars to show current usage against a maximum limit.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9d9a4b77-41a6-41d3-bd77-a6d3578eaeb3.png",1664,673,"Metered Usage Section from Hookdeck",[83],{"id":84,"title":85,"slug":86},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":88},[],{"uuid":90,"title":91,"description":92,"canonical_path":4,"image":93,"width":94,"height":95,"image_alt":96,"kind":56,"categories":97,"app":102},"cb9ed177-e171-46f8-a607-0cb0b616ad8b","Filter popover","A filter popover menu with checkbox options grouped by type and status, and an apply button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbc389720-67de-42aa-83f3-1c5e0953132c.png",749,827,"Filter popover from Hookdeck",[98],{"id":99,"title":100,"slug":101},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":103},[],{"uuid":105,"title":106,"description":107,"canonical_path":4,"image":108,"width":109,"height":110,"image_alt":111,"kind":56,"categories":112,"app":117},"2fcae4b7-1e4a-4641-9205-f037e55f3e78","Informational Alert","A light blue informational alert box containing an icon, text, and an inline link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdb7b7534-74ae-4e95-8ee2-e71cb2a32c92.png",1560,348,"Informational Alert from Hookdeck",[113],{"id":114,"title":115,"slug":116},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":118},[],{"uuid":120,"title":121,"description":122,"canonical_path":4,"image":123,"width":124,"height":125,"image_alt":126,"kind":56,"categories":127,"app":132},"da39c648-b7df-410c-8d7a-d938a278d686","Connection selection radio group","A card containing a title, description, and a horizontal radio group for selecting connection scope.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F94240fa5-7a36-4d7c-a6de-c05d91f90684.png",1628,518,"Connection selection radio group from Hookdeck",[128],{"id":129,"title":130,"slug":131},216,"Radio button","radio-button",{"slug":31,"title":30,"logo":33,"categories":133},[],{"uuid":135,"title":136,"description":137,"canonical_path":4,"image":138,"width":139,"height":140,"image_alt":141,"kind":56,"categories":142,"app":147},"222e8099-6d7e-4315-87ab-6c700b0539f6","Issue card","A card displaying an HTTP 404 error issue, including the connection details, a description, timestamps, and an action to acknowledge the issue.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0961be45-9dd5-4a21-9788-eb667b79952e.png",1952,492,"Issue card from Hookdeck",[143],{"id":144,"title":145,"slug":146},174,"Card","card",{"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":56,"categories":157,"app":162},"c2a9f66a-cbfd-484f-8288-ad5a8d1b297d","Issue status tabs","A horizontal tab navigation bar for filtering issues by status. The active 'Open' tab includes an icon and a numeric badge indicating the count of open issues. Other tabs are 'Acknowledged', 'Resolved', and 'Ignored', each with a corresponding icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fafe5ac96-65da-4c1e-86f8-7f256badb59b.png",2824,334,"Issue status tabs from Hookdeck",[158],{"id":159,"title":160,"slug":161},233,"Tabs","tabs",{"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":56,"categories":172,"app":177},"3646dcd4-00a3-4a7a-a4a3-bc31fc2f1dec","JSON Payload Viewer","A tabbed code block displaying a formatted JSON payload. The active tab is 'Input', showing the raw JSON data with syntax highlighting.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1cf54218-c7d9-4832-bc02-a0e24566c35f.png",1402,1187,"JSON Payload Viewer from Hookdeck",[173],{"id":174,"title":175,"slug":176},187,"Code block","code-block",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":175,"description":181,"canonical_path":4,"image":182,"width":139,"height":183,"image_alt":184,"kind":56,"categories":185,"app":187},"46397316-5d19-475e-9fba-5eb516b207d7","A card displaying a snippet of code with syntax highlighting and a copy-to-clipboard icon in the header.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fee982e42-e91c-487c-89f1-e904e0f836ec.png",750,"Code block from Hookdeck",[186],{"id":174,"title":175,"slug":176},{"slug":31,"title":30,"logo":33,"categories":188},[],{"uuid":190,"title":191,"description":192,"canonical_path":4,"image":193,"width":139,"height":194,"image_alt":195,"kind":56,"categories":196,"app":201},"ef18508e-6698-485e-bb32-6a3089aa1d85","Metrics Bar Chart","A bar chart displaying total events over time, with controls to change the metric and time range, and a footer prompting to upgrade for more metrics.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F870de2d3-1fe0-4282-9a92-daed3df8eba8.png",1332,"Metrics Bar Chart from Hookdeck",[197],{"id":198,"title":199,"slug":200},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":202},[],{"uuid":204,"title":205,"description":206,"canonical_path":4,"image":207,"width":208,"height":209,"image_alt":210,"kind":56,"categories":211,"app":213},"e10995a8-6ff6-46db-b857-3842318f39d6","Hookdeck UI component","A data flow visualization interface","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1b9d4f78-620f-484f-a8de-1d3bad2b8169.png",2744,418,"UI component from Hookdeck",[212],{"id":198,"title":199,"slug":200},{"slug":31,"title":30,"logo":33,"categories":214},[],[],[217,220,223,226,229,232],{"label":218,"to":219},"Hookdeck product screens","\u002Fexamples\u002Fapps\u002Fhookdeck\u002Fscreens",{"label":221,"to":222},"Hookdeck marketing pages","\u002Fexamples\u002Fapps\u002Fhookdeck\u002Fmarketing",{"label":224,"to":225},"Hookdeck user flows","\u002Fexamples\u002Fapps\u002Fhookdeck\u002Fflows",{"label":227,"to":228},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":230,"to":231},"Monitoring app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmonitoring",{"label":233,"to":234},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"published_at":236,"updated_at":237},"2024-02-12T09:05:24.000Z","2026-09-19T12:10:34.000Z"]