CTA Section

Call-to-action section with title, description, and action button for driving conversions

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

Ready to get started?

Start building beautiful interfaces with Nim UI today.

Get Started

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

Join our community

Connect with thousands of developers using Nim UI.

Code

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

Primary

Upgrade to Pro

Unlock premium components, advanced themes, and priority support.

Code

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

Gradient

Build something amazing

From idea to production in record time. The only component library you need.

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

Subscribe to updates

Get notified when we release new components and features.

Code

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

With Secondary Action

Start your free trial

No credit card required. Cancel anytime.

View pricing plans

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

Ready to build?

Get Started

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

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>
      }
    />
  );
}

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

Import

Usage

Ready to get started?

Variants

Default

Join our community

Primary

Upgrade to Pro

Gradient

Build something amazing

With Click Handler

Subscribe to updates

With Secondary Action

Start your free trial

Title Only

Ready to build?

Props

Usage Examples

Landing Page Footer CTA

Upgrade Prompt

Accessibility

On this page