sections

CTASection

Centered call-to-action block with heading, description, and primary/secondary action buttons.

v1.0.0react >=18next >=14tailwind >=4motion >=12

ctacall-to-actionconversionsectionlanding

Preview

Loading preview...

Props

Prop	Type	Default	Description
`heading*`	`ReactNode`	`—`	Primary heading content
`description`	`ReactNode`	`—`	Supporting description text
`primaryAction`	`ReactNode`	`—`	Primary action element (button or link)
`secondaryAction`	`ReactNode`	`—`	Secondary action element (button or link)
`className`	`string`	`—`	Additional Tailwind classes for the outer section
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`heading`	`ReactNode`	Yes	Primary heading (h2 or styled text)
`description`	`ReactNode`	No	Supporting description paragraph
`primaryAction`	`ReactNode`	No	Primary action button (e.g., ShimmerButton)
`secondaryAction`	`ReactNode`	No	Secondary action button or link

Layout

Display: flex

Responsive: Yes

Centered CTA block with heading, description, and action buttons. Max-width constrained.

Examples

Basic CTA

<CTASection
  heading={<h2 className="text-4xl font-bold">Ready to get started?</h2>}
  description={<p className="text-lg text-neutral-400">Join thousands of developers building with ui-universe.</p>}
  primaryAction={<button className="rounded-full bg-white px-8 py-3 text-black">Start Free</button>}
  secondaryAction={<a href="/docs" className="text-neutral-400 underline">Read the docs</a>}
/>

With ShimmerButton

<CTASection
  heading={<h2 className="text-4xl font-bold">Ship faster today</h2>}
  description={<p className="text-lg text-neutral-400">Beautiful, animated UI in minutes.</p>}
  primaryAction={<ShimmerButton>Get Started</ShimmerButton>}
/>

Over background

<div className="relative">
  <GradientMesh className="absolute inset-0" />
  <CTASection
    heading={<h2 className="text-5xl font-bold">Build something beautiful</h2>}
    primaryAction={<button className="rounded-full bg-white px-8 py-3 text-black">Explore Components</button>}
  />
</div>

AI Usage Hint

Use CTASection as the final conversion section on a landing page. Pass heading, description, and action buttons. Pair primaryAction with ShimmerButton for emphasis. Place over a GradientMesh background for visual impact.

Works Well With

ShimmerButtonFadeUpGradientMesh