Marketing block

Community Link Band

A closing CTA of three link cards pointing at GitHub, chat and social — somewhere to go for the visitor who is not ready to convert.

100 lineslucide-reactAdded 8 Aug 2026Updated 2 Sept 2026

community
cta
links
social
footer

What's included

components/community-band.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add community-band

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

Come build with us

Most of what ships started as someone asking for it.

GitHub

Read the source, file an issue, send a pull request.

4.2k stars

Discord

Ask a question and get an answer the same day.

3.1k members

Release notes, new sections, and work in progress.

@handle

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

Source

components/community-band.tsx

/**
 * <CommunityBand> — a closing CTA that points at the places people gather.
 *
 * Three link cards plus a headline. Sits at the foot of a landing page,
 * where the job is no longer to convert but to give a visitor who is not
 * ready somewhere to go that is not "back".
 */

import * as React from 'react'
import { Github, MessagesSquare, Twitter, ArrowUpRight } from 'lucide-react'

export interface CommunityLink {
  label: string
  description: string
  href: string
  icon?: React.ReactNode
  /** Shown as a small tag — star counts, member counts. */
  meta?: string
}

export interface CommunityBandProps {
  links?: CommunityLink[]
  heading?: string
  subheading?: string
  className?: string
}

const DEFAULT_LINKS: CommunityLink[] = [
  {
    label: 'GitHub',
    description: 'Read the source, file an issue, send a pull request.',
    href: 'https://github.com',
    icon: <Github className="h-5 w-5" />,
    meta: '4.2k stars',
  },
  {
    label: 'Discord',
    description: 'Ask a question and get an answer the same day.',
    href: 'https://discord.com',
    icon: <MessagesSquare className="h-5 w-5" />,
    meta: '3.1k members',
  },
  {
    label: 'X',
    description: 'Release notes, new sections, and work in progress.',
    href: 'https://x.com',
    icon: <Twitter className="h-5 w-5" />,
    meta: '@handle',
  },
]

export function CommunityBand({
  links = DEFAULT_LINKS,
  heading = 'Come build with us',
  subheading = 'Most of what ships started as someone asking for it.',
  className = '',
}: CommunityBandProps) {
  return (
    <section className={`mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}>
      <div className="mx-auto mb-10 max-w-2xl text-center">
        <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        {subheading ? <p className="mt-3 text-muted-foreground">{subheading}</p> : null}
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {links.map((link) => (
          <a
            key={link.label}
            href={link.href}
            target="_blank"
            rel="noreferrer noopener"
            className="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-6 backdrop-blur transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg"
          >
            <div className="flex items-center gap-3">
              <span className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-foreground/80 transition-colors group-hover:bg-primary/15 group-hover:text-primary">
                {link.icon}
              </span>
              <span className="font-semibold tracking-tight">{link.label}</span>
              <ArrowUpRight
                aria-hidden
                className="ms-auto h-4 w-4 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-primary"
              />
            </div>

            <p className="mt-3 text-sm text-muted-foreground">{link.description}</p>

            {link.meta ? (
              <span className="mt-4 self-start rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
                {link.meta}
              </span>
            ) : null}
          </a>
        ))}
      </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/community-band.tsx and import it where you need the section:

import { CommunityBand } from '@/components/community-band'

Customize

2 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.

Prop	Type	Default
`links`	`CommunityLink[]`	`DEFAULT_LINKS`
`heading`	`string`	`'Come build with us'`
`subheading`	`string`	`'Most of what ships started as someone asking…`
`className`	`string`	`''`

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.

community-band.html

<!--
  Community Link Band — 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="mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="mx-auto mb-10 max-w-2xl text-center">
    <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">Come build with us</h2>
    <p class="mt-3 text-muted-foreground">Most of what ships started as someone asking for it.</p>
  </div>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
    <a href="https://github.com" target="_blank" rel="noreferrer noopener" class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-6 backdrop-blur transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-foreground/80 transition-colors group-hover:bg-primary/15 group-hover:text-primary">
          <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-github h-5 w-5" aria-hidden="true">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </span>
        <span class="font-semibold tracking-tight">GitHub</span>
        <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-up-right ms-auto h-4 w-4 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-primary" aria-hidden="true">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </div>
      <p class="mt-3 text-sm text-muted-foreground">Read the source, file an issue, send a pull request.</p>
      <span class="mt-4 self-start rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">4.2k stars</span>
    </a>
    <a href="https://discord.com" target="_blank" rel="noreferrer noopener" class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-6 backdrop-blur transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-foreground/80 transition-colors group-hover:bg-primary/15 group-hover:text-primary">
          <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-messages-square h-5 w-5" aria-hidden="true">
            <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"></path>
            <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
          </svg>
        </span>
        <span class="font-semibold tracking-tight">Discord</span>
        <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-up-right ms-auto h-4 w-4 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-primary" aria-hidden="true">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </div>
      <p class="mt-3 text-sm text-muted-foreground">Ask a question and get an answer the same day.</p>
      <span class="mt-4 self-start rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">3.1k members</span>
    </a>
    <a href="https://x.com" target="_blank" rel="noreferrer noopener" class="group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card/80 p-6 backdrop-blur transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-lg">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-muted text-foreground/80 transition-colors group-hover:bg-primary/15 group-hover:text-primary">
          <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-twitter h-5 w-5" aria-hidden="true">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg>
        </span>
        <span class="font-semibold tracking-tight">X</span>
        <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-up-right ms-auto h-4 w-4 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-primary" aria-hidden="true">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </div>
      <p class="mt-3 text-sm text-muted-foreground">Release notes, new sections, and work in progress.</p>
      <span class="mt-4 self-start rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">@handle</span>
    </a>
  </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.

6 more blocks in CTA Sections

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 CTA Sections

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 CTA Sections blocks

View category

Newsletter Capture Band

Email capture with a four-state submission machine and an aria-live status line, so the outcome is announced and not just shown.

CTA Sections134 lines1 dep23 Aug

Closing CTA Panel

A rounded gradient panel that restates the offer for the reader who scrolled past everything — heading left, both CTAs right, reassurance points underneath.

CTA Sections103 lines1 dep10 Sept

Sticky Conversion Bar

The call to action that follows a long page down — held back until the reader is past a scroll threshold, dismissible, and spaced so it never covers the content it is selling.

CTA Sections178 lines1 dep10 Sept

…which is why the migration queues behind the reporting job rather than failing outright. The lock is held for as long as the report runs, and on a large table that can be several minutes.

The safe version is to set a lock timeout and accept that the migration may need a second pass, rather than letting it wait indefinitely and block every write behind it.