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

191 lineslucide-reactAdded 8 Aug 2026Updated 10 Sept 2026
  • hero
  • screenshot
  • browser
  • mockup
  • landing

What's included

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

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add hero-screenshot

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

Analytics, without the spreadsheet

See what your product is doing, right now.

Every event, session and conversion in one place — with the answer already on screen instead of three filters away.

Try it freeWatch the tour
4.9 from 812 reviews on G2
app.acme.com/overview

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

Source

components/hero-screenshot.tsx
/**
 * <HeroScreenshot> — centered copy above a browser-framed product shot.
 *
 * The layout for a product whose value is obvious on sight. Copy sells the
 * idea, the frame proves it exists, and the frame is what does the second
 * job: an unframed screenshot floating on a gradient reads as a mockup,
 * while the same image inside window chrome with a URL bar reads as
 * something already running.
 *
 * `children` replaces the placeholder, so this wraps a real <img> or <video>
 * without touching the frame:
 *
 *   <HeroScreenshot>
 *     <img src="/app.png" alt="" className="w-full" />
 *   </HeroScreenshot>
 *
 * Pass an empty `alt` when you do. The surrounding copy already says what
 * the product is, and a screenshot described twice is noise — the frame and
 * its placeholder are `aria-hidden` for the same reason.
 *
 * The frame is masked at the bottom rather than cropped, which is what
 * keeps a tall screenshot from dictating the height of the fold.
 */

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

export interface HeroScreenshotProps {
  eyebrow?: string
  heading?: string
  subheading?: string
  primaryLabel?: string
  primaryHref?: string
  secondaryLabel?: string
  secondaryHref?: string
  /** URL shown in the frame's address bar. Sell the product, not localhost. */
  addressBar?: string
  /** Rating strip under the CTAs. Omit to hide it. */
  rating?: { score: number; count: number; source: string }
  /** Real screenshot. Falls back to a drawn placeholder. */
  children?: React.ReactNode
  className?: string
}

export function HeroScreenshot({
  eyebrow = 'Analytics, without the spreadsheet',
  heading = 'See what your product is doing, right now.',
  subheading =
    'Every event, session and conversion in one place — with the answer already on screen instead of three filters away.',
  primaryLabel = 'Try it free',
  primaryHref = '#',
  secondaryLabel = 'Watch the tour',
  secondaryHref = '#',
  addressBar = 'app.acme.com/overview',
  rating = { score: 4.9, count: 812, source: 'G2' },
  children,
  className = '',
}: HeroScreenshotProps) {
  return (
    <section className={`relative overflow-hidden ${className}`}>
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute -top-40 left-1/2 h-[30rem] w-[30rem] -translate-x-1/2 rounded-full bg-primary/20 blur-3xl border border-transparent" />
      </div>

      <div className="mx-auto w-full max-w-7xl px-4 pt-20 sm:px-6 lg:px-8 lg:pt-28">
        <div className="mx-auto max-w-3xl text-center">
          {eyebrow ? (
            <span className="inline-flex items-center rounded-full border border-border/60 bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">
              {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="mx-auto mt-5 max-w-2xl text-pretty leading-relaxed text-muted-foreground sm:text-lg">
            {subheading}
          </p>

          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <a
              href={primaryHref}
              className="inline-flex h-12 w-full items-center justify-center gap-1.5 rounded-xl bg-primary px-7 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 sm:w-auto"
            >
              {primaryLabel}
              <ArrowRight aria-hidden className="h-4 w-4 rtl:rotate-180" />
            </a>
            <a
              href={secondaryHref}
              className="inline-flex h-12 w-full items-center justify-center rounded-xl border border-border/60 bg-card/60 px-7 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 sm:w-auto"
            >
              {secondaryLabel}
            </a>
          </div>

          {rating ? (
            <div className="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
              <span aria-hidden className="flex gap-0.5">
                {Array.from({ length: 5 }, (_, i) => (
                  <Star key={i} className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
                ))}
              </span>
              <span>
                <span className="font-semibold text-foreground">{rating.score}</span> from{' '}
                {rating.count.toLocaleString('en-US')} reviews on {rating.source}
              </span>
            </div>
          ) : null}
        </div>

        {/* -- Framed shot --------------------------------------------- */}
        <div className="relative mt-14">
          <div className="mx-auto max-w-5xl overflow-hidden rounded-t-2xl border border-b-0 border-border/60 bg-card/80 shadow-2xl shadow-black/25 backdrop-blur [mask-image:linear-gradient(to_bottom,#000_65%,transparent_100%)]">
            {/* Window chrome */}
            <div className="flex items-center gap-3 border-b border-border/60 px-4 py-3">
              <div aria-hidden className="flex gap-1.5">
                <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="flex flex-1 items-center justify-center">
                <span className="inline-flex items-center gap-1.5 rounded-md bg-background/80 px-3 py-1 text-[11px] text-muted-foreground">
                  <Lock aria-hidden className="h-3 w-3" />
                  {addressBar}
                </span>
              </div>
              <div aria-hidden className="w-12" />
            </div>

            {children ?? <ScreenshotPlaceholder />}
          </div>
        </div>
      </div>
    </section>
  )
}

/**
 * The drawn stand-in for a real screenshot.
 *
 * Kept as a separate component so deleting it is one line once you have an
 * image — and so it stays out of the way of anyone reading the frame above.
 */
function ScreenshotPlaceholder() {
  return (
    <div aria-hidden className="flex h-[26rem] bg-background/60">
      {/* Sidebar */}
      <div className="hidden w-52 shrink-0 border-e border-border/60 p-4 sm:block">
        <div className="h-7 w-24 rounded-md bg-muted border border-transparent" />
        <div className="mt-6 space-y-2">
          {[true, false, false, false, false].map((active, i) => (
            <div
              key={i}
              className={`h-8 rounded-lg border border-transparent ${active ? 'bg-primary/15' : 'bg-muted/60'}`}
            />
          ))}
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 space-y-4 p-5">
        <div className="flex items-center justify-between">
          <div className="h-6 w-40 rounded-md bg-muted border border-transparent" />
          <div className="h-8 w-24 rounded-lg bg-primary/20 border border-transparent" />
        </div>

        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="rounded-xl border border-border/60 p-3">
              <div className="h-2.5 w-12 rounded bg-muted border border-transparent" />
              <div className="mt-2.5 h-5 w-20 rounded bg-muted/80 border border-transparent" />
              <div className="mt-1.5 h-2 w-10 rounded bg-emerald-500/40 border border-transparent" />
            </div>
          ))}
        </div>

        <div className="flex h-48 items-end gap-2 rounded-xl border border-border/60 p-4">
          {[42, 61, 48, 72, 55, 88, 69, 96, 77, 100, 84, 65, 91, 58].map((h, i) => (
            <div
              key={i}
              style={{ height: `${h}%` }}
              className="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"
            />
          ))}
        </div>
      </div>
    </div>
  )
}

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-screenshot.tsx and import it where you need the section:

import { HeroScreenshot } from '@/components/hero-screenshot'

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'Analytics, without the spreadsheet'
headingstring'See what your product is doing, right now.'
subheadingstring—
primaryLabelstring'Try it free'
primaryHrefstring'#'
secondaryLabelstring'Watch the tour'
secondaryHrefstring'#'
addressBarURL shown in the frame's address bar. Sell the product, not localhost.string'app.acme.com/overview'
ratingRating strip under the CTAs. Omit to hide it.{ score: number; count: number; source: string }{ score: 4.9, count: 812, source: 'G2' }
childrenReal screenshot. Falls back to a drawn placeholder.React.ReactNode—
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-screenshot.html
<!--
  Hero with Browser Frame — 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-40 left-1/2 h-[30rem] w-[30rem] -translate-x-1/2 rounded-full bg-primary/20 blur-3xl border border-transparent"></div>
  </div>
  <div class="mx-auto w-full max-w-7xl px-4 pt-20 sm:px-6 lg:px-8 lg:pt-28">
    <div class="mx-auto max-w-3xl text-center">
      <span class="inline-flex items-center rounded-full border border-border/60 bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">Analytics, without the spreadsheet</span>
      <h1 class="mt-5 text-balance text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">See what your product is doing, right now.</h1>
      <p class="mx-auto mt-5 max-w-2xl text-pretty leading-relaxed text-muted-foreground sm:text-lg">Every event, session and conversion in one place — with the answer already on screen instead of three filters away.</p>
      <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <a href="#" class="inline-flex h-12 w-full items-center justify-center gap-1.5 rounded-xl bg-primary px-7 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 sm:w-auto">Try it free<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 w-full items-center justify-center rounded-xl border border-border/60 bg-card/60 px-7 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 sm:w-auto">Watch the tour</a>
      </div>
      <div class="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
        <span aria-hidden="true" class="flex gap-0.5">
          <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-star h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden="true">
            <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
          </svg>
          <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-star h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden="true">
            <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
          </svg>
          <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-star h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden="true">
            <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
          </svg>
          <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-star h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden="true">
            <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
          </svg>
          <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-star h-3.5 w-3.5 fill-amber-400 text-amber-400" aria-hidden="true">
            <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
          </svg>
        </span>
        <span><span class="font-semibold text-foreground">4.9</span> from 812 reviews on G2</span>
      </div>
    </div>
    <div class="relative mt-14">
      <div class="mx-auto max-w-5xl overflow-hidden rounded-t-2xl border border-b-0 border-border/60 bg-card/80 shadow-2xl shadow-black/25 backdrop-blur [mask-image:linear-gradient(to_bottom,#000_65%,transparent_100%)]">
        <div class="flex items-center gap-3 border-b border-border/60 px-4 py-3">
          <div aria-hidden="true" class="flex gap-1.5">
            <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="flex flex-1 items-center justify-center">
            <span class="inline-flex items-center gap-1.5 rounded-md bg-background/80 px-3 py-1 text-[11px] 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-lock h-3 w-3" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>app.acme.com/overview</span>
          </div>
          <div aria-hidden="true" class="w-12"></div>
        </div>
        <div aria-hidden="true" class="flex h-[26rem] bg-background/60">
          <div class="hidden w-52 shrink-0 border-e border-border/60 p-4 sm:block">
            <div class="h-7 w-24 rounded-md bg-muted border border-transparent"></div>
            <div class="mt-6 space-y-2">
              <div class="h-8 rounded-lg border border-transparent bg-primary/15"></div>
              <div class="h-8 rounded-lg border border-transparent bg-muted/60"></div>
              <div class="h-8 rounded-lg border border-transparent bg-muted/60"></div>
              <div class="h-8 rounded-lg border border-transparent bg-muted/60"></div>
              <div class="h-8 rounded-lg border border-transparent bg-muted/60"></div>
            </div>
          </div>
          <div class="flex-1 space-y-4 p-5">
            <div class="flex items-center justify-between">
              <div class="h-6 w-40 rounded-md bg-muted border border-transparent"></div>
              <div class="h-8 w-24 rounded-lg bg-primary/20 border border-transparent"></div>
            </div>
            <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
              <div class="rounded-xl border border-border/60 p-3">
                <div class="h-2.5 w-12 rounded bg-muted border border-transparent"></div>
                <div class="mt-2.5 h-5 w-20 rounded bg-muted/80 border border-transparent"></div>
                <div class="mt-1.5 h-2 w-10 rounded bg-emerald-500/40 border border-transparent"></div>
              </div>
              <div class="rounded-xl border border-border/60 p-3">
                <div class="h-2.5 w-12 rounded bg-muted border border-transparent"></div>
                <div class="mt-2.5 h-5 w-20 rounded bg-muted/80 border border-transparent"></div>
                <div class="mt-1.5 h-2 w-10 rounded bg-emerald-500/40 border border-transparent"></div>
              </div>
              <div class="rounded-xl border border-border/60 p-3">
                <div class="h-2.5 w-12 rounded bg-muted border border-transparent"></div>
                <div class="mt-2.5 h-5 w-20 rounded bg-muted/80 border border-transparent"></div>
                <div class="mt-1.5 h-2 w-10 rounded bg-emerald-500/40 border border-transparent"></div>
              </div>
              <div class="rounded-xl border border-border/60 p-3">
                <div class="h-2.5 w-12 rounded bg-muted border border-transparent"></div>
                <div class="mt-2.5 h-5 w-20 rounded bg-muted/80 border border-transparent"></div>
                <div class="mt-1.5 h-2 w-10 rounded bg-emerald-500/40 border border-transparent"></div>
              </div>
            </div>
            <div class="flex h-48 items-end gap-2 rounded-xl border border-border/60 p-4">
              <div style="height:42%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:61%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:48%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:72%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:55%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:88%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:69%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:96%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:77%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:100%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:84%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:65%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:91%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
              <div style="height:58%" class="flex-1 rounded-sm bg-gradient-to-t from-primary/25 to-primary/80"></div>
            </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
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
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