# Hero Product

> A centered product launch hero with an eyebrow, headline, two actions, a wide image, and a pricing line.

A shadcn/ui block from the [@esuiss](https://suiss.app/ui?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/esuiss/hero-product).

- Page, with a live preview: https://shadcn.exchange/r/esuiss/hero-product
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/esuiss/hero-product-light-167ec43259a3c721.png
- Registry item: https://suiss.app/ui/r/new-york-v4/hero-product.json
- Categories: blocks, hero
- Listed: 2026-10-20, source last changed 2026-10-20

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/esuiss/hero-product.json
```

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

## Dependencies

- Registry items: `@esuiss/button`

## Files

### `components/blocks/hero-product.tsx`

```tsx
import { Button } from "@/components/ui/button"

const image =
  "https://images.unsplash.com/photo-1634403665443-81dc4d75843a?w=1800&q=80&auto=format&fit=crop"

export function HeroProduct() {
  return (
    <section className="flex flex-col items-center overflow-hidden bg-muted pt-13 text-center">
      <div className="flex flex-col items-center gap-1.5 px-6 transition-[opacity,translate] duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none">
        <p className="text-lg font-semibold tracking-tight text-[color-mix(in_oklab,var(--color-orange-500),var(--foreground)_45%)] dark:text-orange-500">
          New
        </p>
        <h1 className="text-5xl font-semibold tracking-tight text-balance md:text-6xl">
          Phone Pro
        </h1>
        <p className="text-2xl text-balance md:text-3xl">
          Beyond professional.
        </p>
      </div>
      <div className="mt-5 flex flex-wrap justify-center gap-4 px-6 transition-[opacity,translate] delay-120 duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none">
        <Button size="lg">Learn more</Button>
        <Button
          size="lg"
          variant="outline"
          className="border-primary bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:bg-transparent"
        >
          Buy
        </Button>
      </div>
      <img
        src={image}
        alt="A phone resting on a soft beige surface"
        className="mt-7 aspect-[2] w-full max-w-245 bg-secondary object-cover transition-[opacity,translate] delay-220 duration-1000 ease-[cubic-bezier(0.45,0,0.2,1)] starting:translate-y-4.5 starting:opacity-0 motion-reduce:transition-none"
      />
      <p className="px-6 pt-2.5 pb-4.5 text-xs text-muted-foreground">
        From $999 or $41.62/mo. for 24 mo.
      </p>
    </section>
  )
}
```