Five columns of integration cards scroll in alternating directions on a tilted 3D plane behind the copy, some lit and syncing. The wall fades into the page under the headline.
300+integrations, and counting
Relaybase keeps your apps in sync with two-way connectors, field-level rules and a full audit trail. Setup takes minutes, not sprints.
npx shadcn@latest add https://hyperblur.dev/r/hero-card-wall.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-card-wall.tsx.
import { HeroCardWall } from "@/components/hyperblur/hero-card-wall"
<HeroCardWall count="120+" title="Every tool, one workflow" items={[{ name: "Ledgerly", detail: "Sync payments", color: "#6366f1" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "integrations, and counting" | Line next to the count badge. Hidden when empty. |
| count | string | "300+" | Badge in front of the eyebrow. Empty hides it. |
| title | string | "Plug into the tools your team already loves" | Headline. |
| subtitle | string | "Relaybase keeps your apps in sync..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Connect your stack", href: "#" } | White button with an arrow. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Browse integrations", href: "#" } | Outlined button. null hides it. |
| items | { name: string; detail: string; color: string; stat?: string }[] | 15 integrations | Cards spread across the five columns. The icon shows the first letter on the color. |
| accent | string | "#2f7bff" | Color of the lit cards, toggles and badge. |
| speed | number | 1 | Multiplier for the column scroll. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |