# CTA section

> A dark closing call to action with meteors and an email capture.

Block · Pro · https://lodeui.com/blocks/cta-section

## When to use

- The end of landing and pricing pages.

## When not to use

- More than once per page.

## Installation

```bash
npx shadcn@latest add @lode/cta-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CtaSection } from "@/components/blocks/cta-section";

<CtaSection title="Start building today" onSubmit={(email) => joinWaitlist(email)} />
```

Built from: Meteors

## API reference

### CtaSection

A dark closing section with email capture or two buttons. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / description | `string` | – | The ask. |
| emailCapture | `boolean` | `true` | Email form; false shows primary and secondary buttons. |
| onSubmit | `(email) => Promise<void>` | – | Throw with a message to show an error. |
| primary / secondary | `{ label; href }` | – | Buttons in button mode. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Submit the email |

## Accessibility

- The field is labelled, errors use role="alert" and success is a status message.

## Motion

- Meteors streak behind; the form swaps to a success pill.

## Responsive behavior

- The field and button stack on phones.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Validate the email again on the server.

## Related

- [Meteors](https://lodeui.com/components/meteors) — Shooting stars streaking across a card or hero.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Footer section](https://lodeui.com/blocks/footer-section) — Site footer with link columns, newsletter, live status and socials.