# Banner

> Banner variant for block.

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

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

## Install

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

## Files

### `src/components/uiable/blocks/landing/banner/banner.tsx`

```tsx
// next
import Link from "next/link"

// third-party
import { cn } from "cn"

// assets
import { ArrowRight } from "lucide-react"

// types
interface BannerProps {
  className?: string
}

//  ------------------------------ | COMPONENT - BANNER | ------------------------------  //

export default function Banner({ className }: BannerProps) {
  return (
    <section
      aria-label="Promotional offer"
      className={cn(
        "relative isolate w-full overflow-hidden bg-violet-600 text-white",
        className
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute -top-24 left-[12%] -z-10 size-64 rounded-full bg-violet-200/30 blur-3xl"
      />

      <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-3.5 gap-y-1.5 px-4 py-2.5 sm:px-8">
        <span className="inline-flex shrink-0 items-center gap-2 rounded-full border border-white/20 bg-white/15 px-2.5 py-1 text-xs font-semibold text-white">
          <span className="size-1.5 animate-pulse rounded-full bg-white shadow-[0_0_0_4px] shadow-white/30" />
          Launch offer
        </span>

        <p className="text-sm leading-5 text-white/90">
          Grab lifetime access before the offer ends.
        </p>

        <Link
          href="/pricing"
          className="group inline-flex shrink-0 items-center gap-1.5 rounded-full bg-yellow-400 px-3 py-1 text-sm font-semibold text-violet-800 transition-all hover:bg-yellow-300"
        >
          Claim 70% off
          <ArrowRight
            aria-hidden="true"
            className="size-3.5 transition-transform group-hover:translate-x-0.5"
          />
        </Link>
      </div>
    </section>
  )
}
```