Skip to content
Browse themes
Marketing block

Integration Wall Hero

A hero whose visual is the connector list itself, marked up as a real list so a visitor can skim it for their own stack — asset-free initials tiles, no third-party marks to license.

135 lineslucide-reactAdded 13 Aug 2026Updated 10 Sept 2026
  • hero
  • integrations
  • connectors
  • logos
  • data

What's included

  • components/hero-integrations.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add hero-integrations

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

120+ connectors

Your stack, finally speaking the same language.

Sync every system you already run into one warehouse — incrementally, on a schedule you set, without writing the pipeline yourself.

Connect a sourceBrowse connectors
  • Postgres
  • Snowflake
  • Stripe
  • Salesforce
  • HubSpot
  • Segment
  • BigQuery
  • Shopify
  • Zendesk
  • Notion
  • Slack
  • Linear
  • +108 more

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/hero-integrations.tsx
/**
 * <HeroIntegrations> — a hero for a product that sits between other products.
 *
 * The pitch for anything whose value is connective: an iPaaS, a sync
 * engine, a warehouse. The visual argument is that the tools the visitor
 * already pays for are on the list, so the list *is* the hero image.
 *
 * The tiles are a real `<ul>`. This is a list of names, and a screen
 * reader should be able to say "list, twelve items" and let someone skim
 * it — that is exactly the question being asked here ("is my stack in
 * there?"), and a grid of divs answers it badly.
 *
 * Each tile is initials in a themed square rather than a brand logo. It
 * keeps the block asset-free and, more usefully, keeps you out of the
 * trademark question that shipping a wall of other companies' marks in a
 * template raises. Swap in `<img>` tags for the brands you have rights to.
 */

import * as React from 'react'
import { ArrowRight, Plug } from 'lucide-react'

export interface HeroIntegrationsProps {
  eyebrow?: string
  heading?: string
  subheading?: string
  primaryLabel?: string
  primaryHref?: string
  secondaryLabel?: string
  secondaryHref?: string
  /** Names rendered as tiles. Around twelve reads as "lots" without wrapping oddly. */
  integrations?: string[]
  /** Trailing tile copy, e.g. "+ 80 more". Omit to hide it. */
  moreLabel?: string
  className?: string
}

const DEFAULT_INTEGRATIONS = [
  'Postgres',
  'Snowflake',
  'Stripe',
  'Salesforce',
  'HubSpot',
  'Segment',
  'BigQuery',
  'Shopify',
  'Zendesk',
  'Notion',
  'Slack',
  'Linear',
]

export function HeroIntegrations({
  eyebrow = '120+ connectors',
  heading = 'Your stack, finally speaking the same language.',
  subheading =
    'Sync every system you already run into one warehouse — incrementally, on a schedule you set, without writing the pipeline yourself.',
  primaryLabel = 'Connect a source',
  primaryHref = '#',
  secondaryLabel = 'Browse connectors',
  secondaryHref = '#',
  integrations = DEFAULT_INTEGRATIONS,
  moreLabel = '+108 more',
  className = '',
}: HeroIntegrationsProps) {
  return (
    <section className={`relative overflow-hidden ${className}`}>
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute -top-32 left-1/2 h-96 w-[40rem] -translate-x-1/2 rounded-full bg-primary/15 blur-3xl border border-transparent" />
      </div>

      <div className="mx-auto grid w-full max-w-7xl items-center gap-12 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8 lg:py-24">
        {/* -- Copy ------------------------------------------------------ */}
        <div className="max-w-xl">
          {eyebrow ? (
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">
              <Plug aria-hidden className="h-3.5 w-3.5 text-primary" />
              {eyebrow}
            </span>
          ) : null}

          <h1 className="mt-5 text-balance text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
            {heading}
          </h1>

          <p className="mt-5 text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">
            {subheading}
          </p>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <a
              href={primaryHref}
              className="inline-flex h-12 items-center justify-center gap-1.5 rounded-xl bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
            >
              {primaryLabel}
              <ArrowRight aria-hidden className="h-4 w-4 rtl:rotate-180" />
            </a>
            <a
              href={secondaryHref}
              className="inline-flex h-12 items-center justify-center rounded-xl border border-border/60 bg-card/60 px-6 text-sm font-semibold backdrop-blur transition-colors hover:bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
            >
              {secondaryLabel}
            </a>
          </div>
        </div>

        {/* -- Connector wall -------------------------------------------- */}
        <ul className="grid grid-cols-3 gap-3 sm:grid-cols-4 lg:gap-4">
          {integrations.map((name) => (
            <li
              key={name}
              className="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card"
            >
              <span
                aria-hidden
                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary"
              >
                {name.slice(0, 2).toUpperCase()}
              </span>
              <span className="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">
                {name}
              </span>
            </li>
          ))}

          {moreLabel ? (
            <li className="flex aspect-square min-w-0 items-center justify-center rounded-2xl border border-dashed border-border/60 p-2 text-center text-[11px] font-medium text-muted-foreground">
              <span className="w-full truncate">{moreLabel}</span>
            </li>
          ) : null}
        </ul>
      </div>
    </section>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/hero-integrations.tsx and import it where you need the section:

import { HeroIntegrations } from '@/components/hero-integrations'

Customize

7 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
eyebrowstring'120+ connectors'
headingstring'Your stack, finally speaking the same langua…
subheadingstring—
primaryLabelstring'Connect a source'
primaryHrefstring'#'
secondaryLabelstring'Browse connectors'
secondaryHrefstring'#'
integrationsNames rendered as tiles. Around twelve reads as "lots" without wrapping oddly.string[]DEFAULT_INTEGRATIONS
moreLabelTrailing tile copy, e.g. "+ 80 more". Omit to hide it.string'+108 more'
classNamestring''

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

hero-integrations.html
<!--
  Integration Wall Hero — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="relative overflow-hidden ">
  <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
    <div class="absolute -top-32 left-1/2 h-96 w-[40rem] -translate-x-1/2 rounded-full bg-primary/15 blur-3xl border border-transparent"></div>
  </div>
  <div class="mx-auto grid w-full max-w-7xl items-center gap-12 px-4 py-16 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8 lg:py-24">
    <div class="max-w-xl">
      <span class="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug h-3.5 w-3.5 text-primary" aria-hidden="true"><path d="M12 22v-5"></path><path d="M9 8V2"></path><path d="M15 8V2"></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"></path></svg>120+ connectors</span>
      <h1 class="mt-5 text-balance text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">Your stack, finally speaking the same language.</h1>
      <p class="mt-5 text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">Sync every system you already run into one warehouse — incrementally, on a schedule you set, without writing the pipeline yourself.</p>
      <div class="mt-8 flex flex-col gap-3 sm:flex-row">
        <a href="#" class="inline-flex h-12 items-center justify-center gap-1.5 rounded-xl bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Connect a source<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 rtl:rotate-180" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a>
        <a href="#" class="inline-flex h-12 items-center justify-center rounded-xl border border-border/60 bg-card/60 px-6 text-sm font-semibold backdrop-blur transition-colors hover:bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Browse connectors</a>
      </div>
    </div>
    <ul class="grid grid-cols-3 gap-3 sm:grid-cols-4 lg:gap-4">
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">PO</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Postgres</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">SN</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Snowflake</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">ST</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Stripe</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">SA</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Salesforce</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">HU</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">HubSpot</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">SE</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Segment</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">BI</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">BigQuery</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">SH</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Shopify</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">ZE</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Zendesk</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">NO</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Notion</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">SL</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Slack</span>
      </li>
      <li class="flex aspect-square min-w-0 flex-col items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card/60 p-2 text-center backdrop-blur transition-colors hover:border-primary/40 hover:bg-card">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/15 text-xs font-bold text-primary">LI</span>
        <span class="w-full truncate text-[11px] font-medium leading-tight text-muted-foreground">Linear</span>
      </li>
      <li class="flex aspect-square min-w-0 items-center justify-center rounded-2xl border border-dashed border-border/60 p-2 text-center text-[11px] font-medium text-muted-foreground">
        <span class="w-full truncate">+108 more</span>
      </li>
    </ul>
  </div>
</section>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
13 more blocks in Heroes
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Heroes
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Heroes blocks
View category
Open the full page for this block
Split Hero with Product Panel
Copy on the left, a drawn product panel on the right — the default hero for anything with an interface to show, with no image asset to host and no layout shift while it loads.
Heroes176 lines1 dep
Open the full page for this block
Centered Announcement Hero
A linked announcement pill over a large centered headline, dual CTAs and a wordmark strip — the hero for a product with nothing to screenshot yet.
Heroes125 lines1 dep
Open the full page for this block
Hero with Browser Frame
Centered copy above a screenshot in window chrome, masked at the bottom so a tall image never dictates the height of the fold. Wraps your own img or video.
Heroes191 lines1 dep
Open the full page for this block
Waitlist Hero with Email Capture
A pre-launch hero whose only ask is an email address, with pending and success states and a signup count that argues for finishing rather than starting.
Heroes163 lines1 dep
Open the full page for this block
Search-First Hero
A hero whose primary action is a real search form with prefilling suggestion chips — for marketplaces and directories, where sending the visitor below the fold to find the search box is the whole failure.
Heroes128 lines1 dep
Open the full page for this block
Developer Hero with Install Command
A drawn terminal whose install line is real, selectable text with a working copy button and a feature-detected clipboard call — the hero for anything adopted by typing rather than signing up.
Heroes163 lines1 dep
Open the full page for this block
App Download Hero with Phone
A drawn phone beside two store links built as real anchors rather than badge images, so they inherit the theme, need no hosted asset and carry an accessible name that is not a filename.
Heroes161 lines1 dep
Open the full page for this block
Hero Anchored by a Customer Quote
Pitch on the left, a marked-up figure and blockquote on the right, so the claim and the evidence for it share the fold instead of sitting a scroll apart.
Heroes129 lines1 dep
Open the full page for this block
Hero with Proof Metrics
A centered hero closing on a definition list of scale numbers, with a masked grid wash behind it — for infrastructure and payments, where "how many" is the second question a buyer asks.
Heroes129 lines1 dep
Open the full page for this block
Editorial Masthead Hero
A serif display headline over a 60-character standfirst and a real byline, with one text link and no competing CTAs — the hero for publications and essays, where the writing is the product.
Heroes99 lines1 dep
Open the full page for this block
Full-Bleed Media Hero
Copy over your own image or video, with a graded scrim and deliberately fixed light-on-dark text — because the background is a photograph in both themes, so flipping the copy would break it.
Heroes106 lines1 dep
Open the full page for this block
Appointment Booking Hero
A day strip built as a radio group rather than buttons, so arrow keys move between dates and sold-out days disable properly — the fold for anything sold by the appointment.
Heroes168 lines1 dep
Open the full page for this block
Hero with Inline Price
Names the price above the fold for single-plan and one-time products, with the former price in a real strikethrough element so it is never announced as the current one.
Heroes135 lines1 dep