# Gradient Hero 01

> A simple centered hero with a warm cinematic gradient, compact badge, short copy, and two actions.

A shadcn/ui block from the [@componentry](https://componentry.fun) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/componentry/gradient-hero-01).

- Page, with a live preview: https://shadcn.exchange/r/componentry/gradient-hero-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/componentry/gradient-hero-01-light-28d23206555a071c.png
- Registry item: https://componentry.fun/r/gradient-hero-01.json
- Categories: hero-section
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://componentry.fun/r/gradient-hero-01.json
```

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

## Files

### `registry/blocks/gradient-hero-01/gradient-hero-01.tsx`

```tsx
export function GradientHero01() {
  return (
    <section className="relative min-h-screen overflow-hidden bg-background font-[system-ui,-apple-system,BlinkMacSystemFont,'Segoe_UI',sans-serif] text-foreground">
      <div
        className="absolute inset-x-[-18%] bottom-[-34%] h-[78%] rounded-[100%] blur-3xl"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(56, 189, 248, 0.58) 0%, rgba(59, 130, 246, 0.34) 34%, rgba(99, 102, 241, 0.2) 58%, transparent 78%)",
        }}
      />
      <div
        className="absolute inset-x-0 bottom-0 h-[68%]"
        style={{
          background:
            "linear-gradient(to top, rgba(37, 99, 235, 0.42), rgba(14, 165, 233, 0.2) 42%, transparent 78%)",
        }}
      />
      <div
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(circle at 50% 55%, color-mix(in oklab, var(--background) 18%, transparent) 0%, transparent 34%, color-mix(in oklab, var(--background) 90%, transparent) 78%)",
        }}
      />
      <div
        className="absolute inset-0"
        style={{
          background:
            "linear-gradient(to bottom, var(--background) 0%, color-mix(in oklab, var(--background) 68%, transparent) 38%, color-mix(in oklab, var(--background) 12%, transparent) 100%)",
        }}
      />

      <div className="relative mx-auto flex min-h-screen max-w-6xl flex-col items-center justify-center px-6 py-24 text-center">
        <div className="rounded-full border border-border bg-background/50 px-4 py-1.5 text-sm font-medium text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_12px_40px_rgba(0,0,0,0.08)] backdrop-blur-md">
          Previewing Componentry Blocks
        </div>

        <h1 className="mt-8 max-w-5xl text-balance text-5xl font-medium leading-[0.96] tracking-normal md:text-6xl lg:text-7xl">
          Launch pages that feel finished from the first pass
        </h1>

        <p className="mt-6 max-w-2xl text-pretty text-base leading-7 text-muted-foreground md:text-lg">
          Simple sections with considered spacing, quiet motion, and production
          ready code you can paste into real product work.
        </p>

        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
          <a className="inline-flex h-11 w-36 items-center justify-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground shadow-[0_1px_0_rgba(255,255,255,0.24)_inset,0_18px_60px_rgba(0,0,0,0.12)] transition hover:opacity-90">
            Explore Blocks
          </a>
          <a className="inline-flex h-11 w-36 items-center justify-center rounded-lg border border-border bg-background/45 px-5 text-sm font-semibold text-foreground/80 shadow-[0_1px_0_rgba(255,255,255,0.12)_inset] backdrop-blur transition hover:bg-foreground/5 hover:text-foreground">
            View Source
          </a>
        </div>
      </div>
    </section>
  )
}
```