Kinetic UI
Back to Introduction
Blocks & Templates

CTA Section

A high-conversion Call to Action section with modern gradients and layout.

Quick Actions
CLI Installation
npx kinetic-ui-cli@latest add cta-section

A high-conversion Call to Action section with modern gradients, engaging copy layout, and primary/secondary actions to drive user engagement. Perfect for landing pages and marketing sites.

Live Preview

CTA Section
v2.0 is now live

Ready to transform your workflow?

Join thousands of developers building faster and more beautiful applications with our premium UI kit.

Installation

npx kinetic-ui-cli@latest add cta-section

Props

  • title: The main headline of the section.
  • description: The supporting text below the headline.
  • primaryActionText: The text for the primary button.
  • primaryActionUrl: The URL for the primary button.
  • secondaryActionText: The text for the secondary outline button.
  • secondaryActionUrl: The URL for the secondary outline button.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CtaSection } from "@/components/creative/cta-section";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CtaSection } from "@/components/creative/cta-section";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CtaSection
        title="example"
        description="example"
        primaryActionUrl="example"
      />
    </div>
  );
}
Performance Notes
  • Uses CSS hardware acceleration via GPU transform-binds.
  • Damped interpolation minimizes paint-redraw flashes.
  • Tree-shakable import: only compiles elements requested.
Accessibility Notes
  • Full keyboard focus-ring navigation support (`Tab`/`Shift+Tab`).
  • ARIA roles mapped correctly for assistive screen readers.
  • Respects `prefers-reduced-motion` system toggles.