CTA band
ProThe closing call to action of a page: one sentence, a line of support and the buttons, in a panel with a soft glow so it reads as the end.
npx prodular-ui add cta-bandPart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
Closing call
One action and a note.
Stop chasing. Start closing on time.
Set up in an afternoon.
14 days free. No card needed.
import { Button } from "@/components/ui/button"import { CtaBand } from "@/components/ui/cta-band"
export default function CtaBandClosing() { return ( <div className="w-full"> <CtaBand title="Stop chasing. Start closing on time." lead="Set up in an afternoon." actions={<Button size="lg">Start free trial</Button>} note="14 days free. No card needed." /> </div> )}Anatomy
<CtaBand title="..." actions={<Button size="lg">Start free trial</Button>} />Guidance
Use it when
- Once, at the end of a page, before the footer.
Avoid
- In the middle of a page.
- More than two actions.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Repeat the hero's primary action; do not invent a new one.
- It is a Section itself; place it directly in the page, not inside another Section.
API
CtaBand
| Prop | Type | Default | Description |
|---|---|---|---|
| title / lead / actions / note | ReactNode | Content. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add cta-band# or, with the registry in components.jsonnpx shadcn@latest add @prodular/cta-band