Hookdeck UI components examples

Hookdeck

A settings row containing a title, a descriptive subtitle, and a toggle switch to turn a feature on or off.

• Toggle/Switch

Hookdeck

A horizontal settings row with a title, description, and a toggle switch to enable or disable a feature.

• Toggle/Switch

Hookdeck

A section displaying metered usage for requests and events, using progress bars to show current usage against a maximum limit.

• Progress indicator

Hookdeck

A filter popover menu with checkbox options grouped by type and status, and an apply button.

• Sorting & filtering

Hookdeck

A light blue informational alert box containing an icon, text, and an inline link.

• Alert

Hookdeck

A card containing a title, description, and a horizontal radio group for selecting connection scope.

• Radio button

Hookdeck

A card displaying an HTTP 404 error issue, including the connection details, a description, timestamps, and an action to acknowledge the issue.

• Card

Hookdeck

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.

• Tabs

Hookdeck

A tabbed code block displaying a formatted JSON payload. The active tab is 'Input', showing the raw JSON data with syntax highlighting.

• Code block

Hookdeck

A card displaying a snippet of code with syntax highlighting and a copy-to-clipboard icon in the header.

• Code block

Hookdeck

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.

• Charts

Hookdeck

A data flow visualization interface

• Charts