An integrations bento with a central hub, animated data flowing along curved links, connectable service tiles, a scrolling webhook log and an SDK install snippet.
Integrations
One hub keeps payments, messaging, storage and analytics in sync, with retries, logs and typed SDKs included.
Every connector routes through one queue with automatic retries.
Payouts, invoices and refunds synced every five minutes.
Route alerts to the right channel with per-team rules.
Mirror files and exports to your own bucket, encrypted.
Stream product events into dashboards in real time.
npm install @conduit/sdkawait conduit.connect("ledger")npx shadcn@latest add https://hyperblur.dev/r/bento-integrations.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-integrations.tsx.
import { BentoIntegrations } from "@/components/hyperblur/bento-integrations"
<BentoIntegrations accent="#22d3ee" onConnectChange={(name, on) => console.log(name, on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Integrations" | Small label above the title. |
| title | string | "Plug into the stack you already run" | Section heading. |
| subtitle | string | "One hub keeps payments, messaging..." | Supporting paragraph under the title. |
| hubLabel | string | "Conduit hub" | Heading under the hub diagram. |
| items | { name: string; category: string; description: string; connected?: boolean }[] | Ledger, Relay, Vault, Pulse | The four service tiles. Hovering a tile lights its link in the hub. |
| events | { method: string; event: string; status: number; ms: number }[] | 7 events | Rows of the looping webhook log. Status 400 and above shows in red. |
| installCommand | string | "npm install @conduit/sdk" | Command shown and copied in the SDK cell. |
| onConnectChange | (name: string, connected: boolean) => void | Called when a tile's Connect button is toggled. | |
| accent | string | "#22d3ee" | Accent color for the flowing beams, hub and states. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |