# CTA band (motion)

> The CTA band, appearing as you scroll to it.

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

## Install

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

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/cta-band-motion.json`. The CLI also installs what it needs: @facade/cta-band, @facade/motion-primitives.

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

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

## Usage

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

```tsx
"use client"

/**
 * The `cta-band` demo, with the motion variant swapped in.
 *
 * Identical props: the motion variant only changes which slot components
 * the static section renders through.
 *
 * `"use client"` is required here, not incidental: the motion variant is a
 * client component, and icon components cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { CtaBandMotion } from "@/components/sections/cta-band-motion"

import { ACTIONS } from "./content"

export function Demo() {
  return (
    <div className="flex flex-col gap-10">
      <CtaBandMotion
        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"
      />
      <CtaBandMotion
        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>
  )
}
```