CTA Banner

Blocks & Slices

A closing call-to-action band: an ink panel with a slow aurora gradient sweep, faint edge-masked dotted grid, and a glow that pulses behind the primary button — with an optional gradient-highlighted accent word.

Inspired by Cult Pro — CTA sections (pattern) — independently built, not affiliated. Attribution policy

Ship your best work faster

Join thousands of teams building with the Parable registry — production-ready components, zero lock-in.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/cta-banner.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/cta-banner.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-2xl px-4">
    <CtaBanner
      title="Ship your best work faster"
      accentWord="faster"
      subtitle="Join thousands of teams building with the Parable registry — production-ready components, zero lock-in."
      primaryLabel="Get started"
      secondaryLabel="View docs"
      onPrimary={() => {}}
      onSecondary={() => {}}
    />
  </div>

Props

CtaBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">

Prop	Type	Default	Description
title*	string	—	Headline. Pair with `accentWord` to gradient-highlight one word.
subtitle	string	—	Optional supporting line under the title.
primaryLabel*	string	—	Primary button label.
onPrimary	() => void	—	Click handler for the primary button.
primaryHref	string	—	If set, the primary CTA renders as a real `<a href>` instead of a button.
secondaryLabel	string	—	Optional secondary button label. Omit to render only the primary CTA.
onSecondary	() => void	—	Click handler for the secondary button.
secondaryHref	string	—	If set, the secondary CTA renders as a real `<a href>` instead of a button.
align	"center" \| "left"	"center"	Content alignment within the panel.
accentWord	string	—	A word inside `title` to render with the brand gradient.

npm dependencies

lucide-react