# CTA Banner

> Full-width inverted band with one decisive action.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/cta-banner).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/cta-banner
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/cta-banner-light-cf7f41a414e2749f.png
- Registry item: https://blockforge.terravidhal.me/r/cta-banner.json
- Categories: cta
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/cta-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: `lucide-react`
- Registry items: `button`

## Files

### `registry/blocks/cta-banner.tsx`

```tsx
import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";

export default function CtaBanner() {
  return (
    <section className="bg-foreground text-background">
      <div className="mx-auto flex w-full max-w-6xl flex-col items-start gap-6 px-6 py-16 sm:flex-row sm:items-center sm:justify-between sm:py-20">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Ready when you are
          </h2>
          <p className="mt-2 max-w-md text-background/70">
            Join 4,000+ teams already shipping faster. Set up takes less than
            two minutes.
          </p>
        </div>
        <Button
          size="lg"
          variant="secondary"
          className="shrink-0 bg-background text-foreground hover:bg-background/90"
          render={<Link href="#" />}
        >
          Get started
          <ArrowRight data-icon="inline-end" />
        </Button>
      </div>
    </section>
  );
}
```