Centered Hero
HeroesA centered marketing hero with a badge, headline, subtext, and dual CTAs over a masked dotted grid. Drops onto any landing page.
bySaumya
1280pxOpen
components/blocks/hero-centered.tsx
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
export function HeroCentered() {
return (
<section className="relative overflow-hidden bg-background">
<div className="bg-grid absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]" />
<div className="relative mx-auto max-w-3xl px-6 py-24 text-center sm:py-32">
<Badge variant="soft" className="mb-5">
v1.0 is now available
</Badge>
<h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
Ship your product{" "}
<span className="text-muted">faster than ever</span>.
</h1>
<p className="mx-auto mt-5 max-w-xl text-pretty text-lg text-muted">
The all-in-one platform that helps teams design, build, and launch —
without the busywork. Start free, scale when you're ready.
</p>
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
<Button size="lg">
Start building <ArrowRight />
</Button>
<Button size="lg" variant="outline">
Book a demo
</Button>
</div>
<p className="mt-6 text-sm text-muted">
No credit card required · Free 14-day trial
</p>
</div>
</section>
);
}Installation
Terminal
npx shadcn@latest add https://ui.saumyarex.xyz/r/hero-centered.jsonInstalls the block and its component dependencies (button, badge) in one step.
This block uses the button, badge components — add them first.
Install dependencies
Terminal
npm install lucide-reactCopy the source
components/blocks/hero-centered.tsx
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
export function HeroCentered() {
return (
<section className="relative overflow-hidden bg-background">
<div className="bg-grid absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]" />
<div className="relative mx-auto max-w-3xl px-6 py-24 text-center sm:py-32">
<Badge variant="soft" className="mb-5">
v1.0 is now available
</Badge>
<h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
Ship your product{" "}
<span className="text-muted">faster than ever</span>.
</h1>
<p className="mx-auto mt-5 max-w-xl text-pretty text-lg text-muted">
The all-in-one platform that helps teams design, build, and launch —
without the busywork. Start free, scale when you're ready.
</p>
<div className="mt-8 flex flex-wrap items-center justify-center gap-3">
<Button size="lg">
Start building <ArrowRight />
</Button>
<Button size="lg" variant="outline">
Book a demo
</Button>
</div>
<p className="mt-6 text-sm text-muted">
No credit card required · Free 14-day trial
</p>
</div>
</section>
);
}