# Hero-4

> A hero section with bold visuals that emphasize brand presence

A shadcn/ui block from the [@hexui](https://hexui.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hexui/hero-4).

- Page, with a live preview: https://shadcn.exchange/r/hexui/hero-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hexui/hero-4-light-95581c916fad95fe.png
- Registry item: https://hexui.sh/r/hero-4.json
- Categories: hero
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hexui.sh/r/hero-4.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

### `registry/blocks/hero/hero-4/source/app/hero/page.tsx`

```tsx
import { SiteHeader } from "../../components/site-header"
import { SiteHero } from "../../components/site-hero"

export default function Page() {
    return (
        <div className="relative min-h-screen w-full overflow-hidden bg-background">
            {/* Full-bleed background image; a separate image is used in dark mode. Content sits above it (z-10). */}
            <div className="absolute inset-0 bg-[url('/demo/backgrounds/vintage.png')] bg-cover bg-center opacity-40 dark:bg-[url('/demo/backgrounds/vintage_dark.png')]" />

            <div className="relative z-10 px-8 mx-auto flex min-h-screen w-full max-w-7xl flex-col items-center">
                <SiteHeader />
                <SiteHero />
            </div>
        </div>
    )
}
```

### `registry/blocks/hero/hero-4/source/components/site-header.tsx`

```tsx
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Command, Menu } from "lucide-react"

const NAV_ITEMS = [
    { href: "#features", label: "Features" },
    { href: "#pricing", label: "Pricing" },
    { href: "#blog", label: "Blog" },
]

export function SiteHeader() {
    return (
        // Fixed header overlays the hero (which is why the hero anchors content at the bottom).
        <header className="fixed inset-x-0 top-0 z-50 w-full">
            <div className="mx-auto flex w-full max-w-7xl items-center justify-between px-8 py-4">
                <div className="flex gap-6">
                    <Link href="#" className="flex items-center gap-2 text-foreground">
                        <Command className="size-5" />
                        <span className="text-base font-semibold tracking-tight">Acme Inc.</span>
                    </Link>

                    {/* Desktop nav; on mobile this is hidden and a menu button is shown instead. */}
                    <nav className="hidden items-center gap-6 md:flex">
                        {NAV_ITEMS.map((item) => (
                            <Link
                                key={item.href}
                                href={item.href}
                                className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
                            >
                                {item.label}
                            </Link>
                        ))}
                    </nav>
                </div>

                <div className="flex items-center gap-1 md:gap-2">
                    <Button className="rounded-4xl p-4">
                        Get Started
                    </Button>
                    <Button variant="ghost" size="icon" className="rounded-4xl md:hidden" aria-label="Open menu">
                        <Menu className="size-5" />
                    </Button>
                </div>
            </div>
        </header>
    )
}
```

### `registry/blocks/hero/hero-4/source/components/site-hero.tsx`

```tsx
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export function SiteHero() {
    return (
        <section className="relative flex h-dvh w-full items-end justify-start">
            <div className="relative max-w-xl z-10 flex flex-col items-start gap-6 pb-24 text-left">
                <h1 className="text-balance text-3xl md:text-4xl xl:text-5xl font-semibold tracking-tight text-foreground">
                    The Fastest Way to Get Things Done
                </h1>

                <p className="max-w-2xl text-pretty text-sm leading-relaxed text-muted-foreground md:text-base xl:text-lg">
                    Build faster with modular tools, reusable components, and a flexible system that adapts to your workflow — from quick experiments to production-ready projects.
                </p>

                <Button size="lg" className="mt-2 h-11 md:h-12 rounded-4xl px-8 text-sm md:text-base">
                    Get Started
                    <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
            </div>
        </section>
    )
}
```