# Hero 22

> Hero 22 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-hero-22).

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

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-hero-22.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: `framer-motion`, `lucide-react`

## Files

### `src/components/uiable/blocks/hero/hero-22/hero-22.tsx`

```tsx
"use client"

// next
import Link from "next/link"

// third-party
import { motion } from "framer-motion"

// assets
import { ChevronRight, Home } from "lucide-react"

interface PageHeaderProps {
  title?: string
  breadcrumbTitle?: string
}

const defaultData: PageHeaderProps = {
  breadcrumbTitle: "Home",
  title: "Big Things Are Coming",
}

export default function Hero22({
  title = defaultData.title,
  breadcrumbTitle = defaultData.breadcrumbTitle,
}: PageHeaderProps = {}) {
  return (
    <div className="relative overflow-hidden border-b border-slate-200 bg-slate-50 pt-24 pb-16 text-slate-900 transition-colors sm:pt-32 sm:pb-24 dark:border-white/10 dark:bg-[#0A0F1C] dark:text-white">
      {/* Background Effects */}
      <div className="absolute inset-0 bg-[url('https://cdn.uiable.com/block/grid-pattern.svg')] bg-center opacity-[0.05]" />
      <div className="pointer-events-none absolute top-0 left-1/2 h-[500px] w-full -translate-x-1/2 bg-gradient-to-b from-blue-500/20 to-transparent opacity-30 blur-3xl" />

      <div className="relative z-10 mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="flex flex-col items-center justify-center space-y-6"
        >
          {/* Breadcrumb */}
          <nav className="flex items-center space-x-2 text-sm font-medium text-slate-500 dark:text-slate-400">
            <Link
              href="/"
              className="flex items-center transition-colors hover:text-blue-600 dark:hover:text-blue-400"
            >
              <Home className="mr-1 h-4 w-4" />
              Home
            </Link>
            <ChevronRight className="h-4 w-4 text-slate-400 dark:text-slate-500" />
            <span className="text-blue-600 dark:text-blue-400">
              {breadcrumbTitle}
            </span>
          </nav>

          {/* Title */}
          <h1 className="text-4xl leading-[1.1] font-extrabold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl dark:bg-gradient-to-br dark:from-white dark:to-slate-400 dark:bg-clip-text dark:text-transparent">
            {title}
          </h1>
        </motion.div>
      </div>
    </div>
  )
}
```