Knock UI components examples

Knock

A success toast notification confirming an environment switch, featuring a green checkmark icon, a descriptive message, and a close button.

• Notification Toast

Knock

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.

• Table

Knock

A card component displaying an integration option with a logo, title, description, and a configuration button.

• Card

Knock

A card displaying an integration option with a prompt to upgrade the user's plan to access it.

• Card

Knock

A horizontal tab navigation component with three tabs. Two tabs include numeric badges indicating counts.

• Tabs

Knock

A button group containing a secondary cancel button and a primary destructive action button.

• Button group

Knock

A segmented control with two options: Request and Response. The Request option is currently selected.

• Segmented control

Knock

A dark-themed tooltip providing contextual help text, appearing next to an information icon.

• Tooltip

Knock

A popover menu for applying filters, containing a list of checkbox options and actions to clear or apply the selection.

• Sorting & filtering

Knock

A tooltip displaying 'Copied!' after a user interacts with a copy action next to a numeric string.

• Tooltip

Knock

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.

• Query builder

Knock

A form section for building a logical condition, containing dropdowns for condition type and operator, and text inputs for data property and value.

• Query builder