Integration 33 - Webhook event cards with connect dialog

Pro

Stacked two-column cards pairing a partner logo, event chips, and description with a sample webhook payload. A connect button opens a dialog for endpoint URL and signing secret.

Shadcn Integration 33 block

Component data

ID
integration33
Access
pro
Created
Aug 19, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Integration 33 block design & features

Integration33 is a webhook catalog built with shadcn/ui Dialog, Input, Label, and Button. A heading and supporting paragraph introduce stacked cards. Each card splits into copy and a code sample. The left side has a logo, description, monospace event chips, and a small outline connect button. The right side is a muted well with a sample POST payload. Clicking connect opens a dialog with that tool's logo, an endpoint URL field, a signing secret field, and cancel or connect actions.

Cards are bordered and roomy. Event names sit in muted chips. The payload uses a compact mono stack rather than syntax highlighting. The dialog is a single column with a small bordered logo tile above the title. After connecting, the card button switches to a connected state and the footer switches to disconnect and done.

This is a developer-facing integrations pattern rather than a logo cloud. Complexity is moderate and content-driven: each partner needs events and a payload, plus per-tool endpoint and secret values.

On small screens the payload stacks under the copy. At large breakpoints the card is two columns.