Centered hero

Installation

npx shadcn@latest add http://localhost:3000/r/hero-centered.json

MKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.

Also installs: container, section, cta-group.

Usage

import { Button } from "@/components/ui/button";
import { HeroCentered } from "@/components/hero-centered";

<HeroCentered
  eyebrow="Fixed-price plumbing"
  title="Know the price before we start"
  description="Every job quoted in writing, with a six-year workmanship warranty."
  actions={
    <>
      <Button asChild><a href="#quote">Get a fixed price</a></Button>
      <Button variant="outline" asChild><a href="#services">See what we cover</a></Button>
    </>
  }
  note="Free quotes · No obligation"
  proof={<RatingDisplay value={4.8} count={214} source="on Google" className="justify-center" />}
/>

Props

Prop	Type	Default	Description
title (required)	ReactNode	—	The headline. Rendered as the page's h1.
eyebrow	ReactNode	—	Short label above the headline.
description	ReactNode	—	One or two sentences.
actions	ReactNode	—	Buttons or links, primary first.
note	ReactNode	—	Reassurance under the actions.
proof	ReactNode	—	A rating, logo strip, or credential row.
media	ReactNode	—	Media below the copy, full page width. A product screenshot in a MediaFrame, for instance.
surface	"default" \| "muted" \| "brand" \| "inverted"	"default"	Background treatment.

When to use this instead of the split hero

Use hero-centered when there is one thing to say and one thing to do — a campaign landing page, a single offer, a page where the copy is the product. Use hero-split when you have something to show and the image deserves equal weight rather than being pushed below the fold.

Behaviour

Copy sits in the narrow container so the headline does not stretch into one long line. media breaks out to the full page width beneath it.

Renders on the server. No client JavaScript.

Limitations

No background-image or video variant yet.
proof and media are open slots rather than structured props.