CTA Banner Section React component
A call-to-action banner: a rounded card with a light that travels around its border, a soft glow that follows the pointer over a faded grid, a headline, two buttons, a small note and a check list, centred or split into two columns.
About the CTA Banner Section component
CTA Banner Section is the closing call to action for a page. It sits in a rounded card with a bright light that keeps travelling around the border, a faint grid and a glow that follows the pointer, so it draws the eye without a loud background colour.
It has an eyebrow, a headline, a description, two buttons, a short reassurance note and a check list. Choose centered for a classic end-of-page banner, or split to put the text on the left and the buttons on the right on wider screens.
When to use it
Use it at the end of a landing page, pricing page or blog post, right before the footer.
Use split inside long pages where a centred banner would feel like the end.
Installation
Add the CTA Banner Section component to your project with the shadcn CLI. It lands in components/cta-banner-section.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/cta-banner-sectionOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<CtaBannerSection /> accepts 12 props, all optional.
| Prop | Type | Default |
|---|---|---|
| eyebrow | string | "Get started" |
| title | string | "Your next quarter starts with one plan" |
| description | string | "Bring your backlog, invite your team and have a roadmap people can read by Friday." |
| primaryAction | { label: string; href?: string; onClick?: () => void } | null | { label: "Start for free", href: "#" } |
| secondaryAction | { label: string; href?: string; onClick?: () => void } | null | { label: "Talk to sales", href: "#" } |
| points Short reassurance points shown as a check list. Pass [] to hide them. | string[] | ["Free for up to 10 people", "Import from your current tool", "Cancel any time"] |
| note Small line under the buttons, e.g. "No card required". | string | "No credit card required." |
| layout centered: everything in the middle. split: text on the left, buttons and points on the right. | "centered" | "split" | "centered" |
| accent Colour of the light that travels around the border and of the pointer glow. | string | "#7C8CFF" |
| beam Light that travels around the card border. | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- eyebrowstringDefault: "Get started"
- titlestringDefault: "Your next quarter starts with one plan"
- descriptionstringDefault: "Bring your backlog, invite your team and have a roadmap people can read by Friday."
- primaryAction{ label: string; href?: string; onClick?: () => void } | nullDefault: { label: "Start for free", href: "#" }
- secondaryAction{ label: string; href?: string; onClick?: () => void } | nullDefault: { label: "Talk to sales", href: "#" }
- points
Short reassurance points shown as a check list. Pass [] to hide them.
string[]Default: ["Free for up to 10 people", "Import from your current tool", "Cancel any time"] - note
Small line under the buttons, e.g. "No card required".
stringDefault: "No credit card required." - layout
centered: everything in the middle. split: text on the left, buttons and points on the right.
"centered" | "split"Default: "centered" - accent
Colour of the light that travels around the border and of the pointer glow.
stringDefault: "#7C8CFF" - beam
Light that travels around the card border.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
CTA Banner Section FAQ
- How do I change the colour of the moving light?
- Set accent to any CSS colour, for example accent="#22C55E". The same colour is used for the pointer glow and the eyebrow dot.
- Can I turn the animation off?
- Set beam={false} to keep a static border. With reduced motion turned on in the system, the beam is hidden and the glow stays in one place automatically.
- Does it work with one button?
- Yes. Pass secondaryAction={null} for a single button, or primaryAction={null} to keep only the outlined one.
- How does the split layout respond?
- It uses container queries, so it switches to two columns when the block itself is at least 860px wide, not the window. In a narrow column it stays stacked.
- Can the buttons run code instead of linking?
- Leave out href and pass onClick, for example to open a sign-up modal. With an href the button renders as a link.
