# Hero sections

> Centered hero with a bordered funding announcement pill and Read more link, a large headline, a short paragraph, and Get started and ghost Learn more buttons side by side.

A shadcn/ui block from the [@shadcnuikit](https://shadcnuikit.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnuikit/hero1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnuikit/hero1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnuikit/hero1-light-5c2e39f753204af5.png
- Registry item: https://shadcnuikit.com/r/hero1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnuikit.com/r/hero1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `contents/blocks/marketing/hero-sections/1/index.tsx`

```tsx
import { ArrowRightIcon } from "lucide-react";
import Link from "next/link";

import { Button } from "@/components/ui/button";

export default function HeroSection() {
  return (
    <div className="mx-auto w-full max-w-2xl px-4 py-14 sm:px-6 sm:py-20 lg:max-w-7xl lg:px-8">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <div className="hidden sm:mb-4 sm:flex sm:justify-center">
            <div className="relative rounded-full border px-3 py-1 text-sm">
              Announcing our next round of funding.{" "}
              <Link href="#" className="text-primary font-semibold">
                <span aria-hidden="true" className="absolute inset-0" />
                Read more
              </Link>
            </div>
          </div>
          <div className="text-center">
            <h1 className="text-foreground text-4xl leading-tight font-bold md:text-5xl">
              Empower Your Creativity with Innovative Tools
            </h1>
            <p className="text-muted-foreground mt-4 text-lg leading-relaxed text-balance">
              Unlock your potential with a suite of tools designed to transform
              your ideas into reality. Create, build, and inspire with ease
              while achieving stunning results that truly stand out.
            </p>
            <div className="mt-10 flex items-center justify-center gap-x-3">
              <Button size="lg" asChild>
                <Link href="#">Get started</Link>
              </Button>
              <Button
                size="lg"
                variant="ghost"
                className="font-semibold"
                asChild
              >
                <Link href="#">
                  Learn more <ArrowRightIcon />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```