# CTA band (goodtabs UI)

A slim call to action on a hairline band: one line and one action.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/cta-band.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/cta-band`

## Usage

```tsx
import { CtaBand } from "@/components/cta-band"
import { Button } from "@/components/ui/button"

<CtaBand title="Ship the first screen today" action={<Button>Start free</Button>} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | One line that says what happens next. |
| action | `ReactNode` |  | Usually one button; two at most. |

## When to use

- Between sections or above the footer, when the ask is one line
- Where a full closing section would be too loud

## When not to use

- As the page's main closing moment, which wants a bigger section
- With a paragraph of copy; keep it to one line

## Notes for agents

- Server component; pass buttons from @/components/ui/button into action
- Full width with border-y; the content sits in max-w-6xl
- Stacks below sm so the button sits under the line

Docs: https://ui.goodtabs.co/components/cta-band