# CTA band

> A closing call to action band. Choose a muted, card, plain or primary-coloured background.

Facade UI item `cta-band` (block, section).
Docs page: https://facadeui.dev/components/cta-band · Registry JSON: https://facadeui.dev/r/cta-band.json

## Install

```bash
npx shadcn@latest add @facade/cta-band
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/cta-band.json`. The CLI also installs what it needs: @facade/container, @facade/cta-group, @facade/eyebrow, @facade/heading, @facade/section, @facade/types, @facade/utils.

Files: `components/sections/cta-band.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/cta-band-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { CtaBand } from "@/components/sections/cta-band"

import { ACTIONS } from "./content"

export function Demo() {
  return (
    <div className="flex flex-col gap-10">
      <CtaBand
        title="Ready when you are"
        description="Install the first section and see how it sits in your own theme."
        actions={ACTIONS}
        note="No account required."
        spacing="none"
      />
      <CtaBand
        variant="primary"
        layout="split"
        title="Or start from a template"
        description="Whole pages, assembled from the same sections."
        actions={[{ label: "Browse templates", href: "#templates" }]}
        spacing="none"
      />
    </div>
  )
}
```

## Props

### CtaBandProps

Extends StackSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `string` |  |  |
| `description` | `string` |  |  |
| `eyebrow` | `ReactNode` |  |  |
| `actions` | `CtaItem[]` |  |  |
| `link` | `LinkComponent` |  |  |
| `note` | `ReactNode` |  |  |
| `variant` | `"muted" \| "card" \| "primary" \| "plain"` | `"muted"` | `muted` and `card` sit inside the container. `primary` uses the primary colour as the background. |
| `layout` | `"center" \| "split"` | `"center"` | `center` stacks everything; `split` puts the buttons beside the copy. |
| `headingLevel` | `HeadingLevel` | `2` |  |
| `as` | `"section" \| "div"` | `"section"` |  |
| `spacing` | `"sm" \| "md" \| "lg" \| "none"` | `"md"` |  |
| `className` | `string` |  |  |
| `id` | `string` |  |  |