Skip to content
Browse themes
Marketing 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.

176 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026
  • hero
  • split
  • landing
  • above the fold
  • saas

What's included

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

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add hero-split

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

Now in public beta

Ship your next idea before the weekend.

Everything you need to launch — auth, billing, analytics and a dashboard your customers will actually understand.

Start buildingBook a demo
  • No credit card required
  • Free for 14 days
  • Cancel anytime

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

Source

components/hero-split.tsx
/**
 * <HeroSplit> — copy on the left, a product panel on the right.
 *
 * The default hero for anything with a UI to show. The asymmetry is the
 * point: a centered hero makes the reader choose between reading and
 * looking, where a split one lets the sentence and the screenshot land
 * together.
 *
 * Two details worth keeping if you rewrite the markup:
 *
 *  - The `<h1>` is the only h1 on the page. Heroes are the most-copied
 *    section in any catalog and the most common place a second one gets
 *    introduced, which is the single easiest way to flatten a page's
 *    outline for a screen reader.
 *  - The panel is `aria-hidden`. It is a drawing of an interface, not an
 *    interface — announcing "Revenue, 48,120, Today" to someone who cannot
 *    see it reads as real data from a real account.
 *
 * The panel is deliberately plain divs rather than an <img>: no asset to
 * host, no layout shift while it loads, and it inherits the theme, so it is
 * still legible the moment someone flips to light mode.
 */

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

export interface HeroSplitProps {
  eyebrow?: string
  heading?: string
  subheading?: string
  primaryLabel?: string
  primaryHref?: string
  secondaryLabel?: string
  secondaryHref?: string
  /** Short reassurances under the buttons — pricing, commitment, setup. */
  bullets?: string[]
  className?: string
}

const DEFAULT_BULLETS = ['No credit card required', 'Free for 14 days', 'Cancel anytime']

export function HeroSplit({
  eyebrow = 'Now in public beta',
  heading = 'Ship your next idea before the weekend.',
  subheading =
    'Everything you need to launch — auth, billing, analytics and a dashboard your customers will actually understand.',
  primaryLabel = 'Start building',
  primaryHref = '#',
  secondaryLabel = 'Book a demo',
  secondaryHref = '#',
  bullets = DEFAULT_BULLETS,
  className = '',
}: HeroSplitProps) {
  return (
    <section className={`relative overflow-hidden ${className}`}>
      {/* Ambient wash. Sits behind everything and eats no pointer events. */}
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute -top-32 left-1/4 h-96 w-96 rounded-full bg-primary/20 blur-3xl border border-transparent" />
        <div className="absolute -top-20 right-1/5 h-80 w-80 rounded-full bg-rose-500/10 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">
              <span
                aria-hidden
                className="h-1.5 w-1.5 rounded-full bg-primary shadow-[0_0_0_3px] shadow-primary/20 border border-transparent"
              />
              {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>

          {bullets.length > 0 ? (
            <ul className="mt-6 flex flex-wrap gap-x-5 gap-y-2">
              {bullets.map((b) => (
                <li key={b} className="flex items-center gap-1.5 text-xs text-muted-foreground">
                  <Check aria-hidden className="h-3.5 w-3.5 text-primary" />
                  {b}
                </li>
              ))}
            </ul>
          ) : null}
        </div>

        {/* -- Product panel ------------------------------------------- */}
        <div aria-hidden className="relative">
          <div className="rounded-2xl border border-border/60 bg-card/80 p-2 shadow-2xl shadow-black/20 backdrop-blur">
            {/* Window chrome */}
            <div className="flex items-center gap-1.5 px-3 py-2">
              <span className="h-2.5 w-2.5 rounded-full bg-rose-500/70 border border-transparent" />
              <span className="h-2.5 w-2.5 rounded-full bg-amber-500/70 border border-transparent" />
              <span className="h-2.5 w-2.5 rounded-full bg-emerald-500/70 border border-transparent" />
            </div>

            <div className="space-y-3 rounded-xl bg-background/80 p-4">
              {/* Metric row */}
              <div className="grid grid-cols-3 gap-3">
                {[
                  { label: 'Revenue', value: '$48,120', delta: '+12.4%' },
                  { label: 'Active', value: '2,847', delta: '+3.1%' },
                  { label: 'Churn', value: '0.8%', delta: '-0.3%' },
                ].map((m) => (
                  <div key={m.label} className="min-w-0 rounded-lg border border-border/60 p-3">
                    <div className="truncate text-[10px] uppercase tracking-wide text-muted-foreground">
                      {m.label}
                    </div>
                    <div className="mt-1 break-words text-lg font-bold tracking-tight">{m.value}</div>
                    <div className="break-words text-[10px] font-medium text-emerald-500">{m.delta}</div>
                  </div>
                ))}
              </div>

              {/* Bar chart, heights as inline styles because the values are
                  data — a Tailwind class per possible height is a class list
                  that grows with the dataset. */}
              <div className="flex h-32 items-end gap-1.5 rounded-lg border border-border/60 p-3">
                {[38, 52, 44, 67, 58, 81, 72, 94, 86, 100, 91, 78].map((h, i) => (
                  <div
                    key={i}
                    style={{ height: `${h}%` }}
                    className="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"
                  />
                ))}
              </div>

              {/* Rows */}
              <div className="space-y-2">
                {['Acme Corp', 'Globex', 'Initech'].map((name, i) => (
                  <div
                    key={name}
                    className="flex items-center gap-3 rounded-lg border border-border/60 p-2.5"
                  >
                    <span className="flex h-7 w-7 items-center justify-center rounded-md bg-primary/15 text-[10px] font-bold text-primary">
                      {name.slice(0, 2).toUpperCase()}
                    </span>
                    <span className="flex-1 text-xs font-medium">{name}</span>
                    <span className="text-xs text-muted-foreground">
                      ${(4200 - i * 900).toLocaleString('en-US')}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </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-split.tsx and import it where you need the section:

import { HeroSplit } from '@/components/hero-split'

Customize

6 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'Now in public beta'
headingstring'Ship your next idea before the weekend.'
subheadingstring—
primaryLabelstring'Start building'
primaryHrefstring'#'
secondaryLabelstring'Book a demo'
secondaryHrefstring'#'
bulletsShort reassurances under the buttons — pricing, commitment, setup.string[]DEFAULT_BULLETS
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-split.html
<!--
  Split Hero with Product Panel — 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/4 h-96 w-96 rounded-full bg-primary/20 blur-3xl border border-transparent"></div>
    <div class="absolute -top-20 right-1/5 h-80 w-80 rounded-full bg-rose-500/10 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"><span aria-hidden="true" class="h-1.5 w-1.5 rounded-full bg-primary shadow-[0_0_0_3px] shadow-primary/20 border border-transparent"></span>Now in public beta</span>
      <h1 class="mt-5 text-balance text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">Ship your next idea before the weekend.</h1>
      <p class="mt-5 text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">Everything you need to launch — auth, billing, analytics and a dashboard your customers will actually understand.</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">Start building<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">Book a demo</a>
      </div>
      <ul class="mt-6 flex flex-wrap gap-x-5 gap-y-2">
        <li class="flex items-center gap-1.5 text-xs text-muted-foreground"><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-check h-3.5 w-3.5 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>No credit card required</li>
        <li class="flex items-center gap-1.5 text-xs text-muted-foreground"><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-check h-3.5 w-3.5 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>Free for 14 days</li>
        <li class="flex items-center gap-1.5 text-xs text-muted-foreground"><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-check h-3.5 w-3.5 text-primary" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>Cancel anytime</li>
      </ul>
    </div>
    <div aria-hidden="true" class="relative">
      <div class="rounded-2xl border border-border/60 bg-card/80 p-2 shadow-2xl shadow-black/20 backdrop-blur">
        <div class="flex items-center gap-1.5 px-3 py-2">
          <span class="h-2.5 w-2.5 rounded-full bg-rose-500/70 border border-transparent"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-amber-500/70 border border-transparent"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-emerald-500/70 border border-transparent"></span>
        </div>
        <div class="space-y-3 rounded-xl bg-background/80 p-4">
          <div class="grid grid-cols-3 gap-3">
            <div class="min-w-0 rounded-lg border border-border/60 p-3">
              <div class="truncate text-[10px] uppercase tracking-wide text-muted-foreground">Revenue</div>
              <div class="mt-1 break-words text-lg font-bold tracking-tight">$48,120</div>
              <div class="break-words text-[10px] font-medium text-emerald-500">+12.4%</div>
            </div>
            <div class="min-w-0 rounded-lg border border-border/60 p-3">
              <div class="truncate text-[10px] uppercase tracking-wide text-muted-foreground">Active</div>
              <div class="mt-1 break-words text-lg font-bold tracking-tight">2,847</div>
              <div class="break-words text-[10px] font-medium text-emerald-500">+3.1%</div>
            </div>
            <div class="min-w-0 rounded-lg border border-border/60 p-3">
              <div class="truncate text-[10px] uppercase tracking-wide text-muted-foreground">Churn</div>
              <div class="mt-1 break-words text-lg font-bold tracking-tight">0.8%</div>
              <div class="break-words text-[10px] font-medium text-emerald-500">-0.3%</div>
            </div>
          </div>
          <div class="flex h-32 items-end gap-1.5 rounded-lg border border-border/60 p-3">
            <div style="height:38%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:52%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:44%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:67%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:58%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:81%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:72%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:94%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:86%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:100%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:91%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
            <div style="height:78%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/30 to-primary"></div>
          </div>
          <div class="space-y-2">
            <div class="flex items-center gap-3 rounded-lg border border-border/60 p-2.5">
              <span class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/15 text-[10px] font-bold text-primary">AC</span>
              <span class="flex-1 text-xs font-medium">Acme Corp</span>
              <span class="text-xs text-muted-foreground">$4,200</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg border border-border/60 p-2.5">
              <span class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/15 text-[10px] font-bold text-primary">GL</span>
              <span class="flex-1 text-xs font-medium">Globex</span>
              <span class="text-xs text-muted-foreground">$3,300</span>
            </div>
            <div class="flex items-center gap-3 rounded-lg border border-border/60 p-2.5">
              <span class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/15 text-[10px] font-bold text-primary">IN</span>
              <span class="flex-1 text-xs font-medium">Initech</span>
              <span class="text-xs text-muted-foreground">$2,400</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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
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
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.
Heroes135 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