Skip to content
Nim UI

CTA Section

The CTA (Call-to-Action) component creates a prominent section designed to encourage users to take a specific action. It supports multiple visual variants, primary and secondary actions, and flexible content layout.

Import

import { CTA } from '@nim-ui/components';

Usage

Default CTA

View Code 
<CTA
  title="Ready to get started?"
  description="Start building beautiful interfaces with Nim UI today."
  buttonText="Get Started"
  buttonHref="/getting-started/installation/"
/>

Variants

Default

Default Variant

View Code 
<CTA
  variant="default"
  title="Join our community"
  description="Connect with thousands of developers using Nim UI."
  buttonText="Join Now"
/>

Primary

Primary Variant

View Code 
<CTA
  variant="primary"
  title="Upgrade to Pro"
  description="Unlock premium components, advanced themes, and priority support."
  buttonText="Start Free Trial"
/>

Gradient

Gradient Variant

View Code 
<CTA
  variant="gradient"
  title="Build something amazing"
  description="From idea to production in record time. The only component library you need."
  buttonText="Get Started Free"
/>

With Click Handler

CTA with onClick

View Code 
<CTA
  title="Subscribe to updates"
  description="Get notified when we release new components and features."
  buttonText="Subscribe"
  onButtonClick={() => setShowSubscribeModal(true)}
/>

With Secondary Action

CTA with Secondary Action

View Code 
<CTA
  variant="primary"
  title="Start your free trial"
  description="No credit card required. Cancel anytime."
  buttonText="Start Trial"
  secondaryAction={
    <a href="/pricing" className="text-sm underline opacity-80 hover:opacity-100">
      View pricing plans
    </a>
  }
/>

Title Only

Minimal CTA

View Code 
<CTA
  title="Ready to build?"
  buttonText="Get Started"
  buttonHref="/getting-started/installation/"
/>

Props

Name Type Default Description
title * string - Main heading text of the CTA section
description string - Supporting text displayed below the title
buttonText * string - Label for the primary action button
buttonHref string - URL the button links to. Renders the button as an anchor element when provided.
onButtonClick () => void - Click handler for the primary button. Used when buttonHref is not provided.
secondaryAction ReactNode - Optional secondary action element displayed below or beside the primary button
variant 'default' | 'primary' | 'gradient' 'default' Visual style variant of the CTA section background
className string - Additional CSS classes to apply to the root element

Usage Examples

Landing Page Footer CTA

function LandingFooterCTA() {
  return (
    <CTA
      variant="gradient"
      title="Ship your next project faster"
      description="Join 10,000+ developers already building with Nim UI. Free and open source."
      buttonText="Get Started"
      buttonHref="/getting-started/installation/"
      secondaryAction={
        <a
          href="https://github.com/nim-ui"
          className="text-sm underline opacity-80 hover:opacity-100"
        >
          Star us on GitHub
        </a>
      }
    />
  );
}

Newsletter Signup

function NewsletterCTA() {
  const [showModal, setShowModal] = useState(false);


  return (
    <>
      <CTA
        variant="primary"
        title="Stay in the loop"
        description="Get weekly updates on new components, guides, and tips delivered to your inbox."
        buttonText="Subscribe"
        onButtonClick={() => setShowModal(true)}
      />
      {showModal && (
        <Modal isOpen onClose={() => setShowModal(false)} title="Subscribe">
          <Input placeholder="you@example.com" type="email" />
          <Button variant="primary" fullWidth>
            Subscribe
          </Button>
        </Modal>
      )}
    </>
  );
}

Upgrade Prompt

function UpgradePrompt() {
  return (
    <CTA
      variant="primary"
      title="Unlock all components"
      description="Upgrade to Nim Pro for premium components, custom themes, and dedicated support."
      buttonText="Upgrade Now"
      buttonHref="/pricing"
      secondaryAction={
        <span className="text-sm opacity-70">
          Starting at $9/month
        </span>
      }
    />
  );
}

Accessibility

The CTA component follows accessibility best practices:

  • Uses semantic section and heading elements for proper document structure
  • The primary button uses <a> when buttonHref is provided and <button> when using onButtonClick
  • All interactive elements are keyboard accessible
  • Color contrast ratios meet WCAG AA standards across all variants, including the gradient variant
  • The section can be identified by assistive technologies through its heading
  • Hero - Full-width hero section for page headers
  • Button - Interactive button component
  • FeatureGrid - Feature display grid