CTA Sections

Call-to-action sections are crucial for guiding users toward desired actions. These components help you create compelling CTAs that drive engagement and conversions.

Component Variants

CTA Banner

TypeScript UI v2.0 is now available!Learn more→

Dismiss

CTA Banner (No Icon, Non-Dismissible)

Join thousands of developers building with TypeScript UI.Get started→

CTA Simple (Two Buttons)

Ready to get started?

Join thousands of developers building beautiful interfaces with TypeScript UI components.

Get startedLearn more

CTA Simple (Single Button)

Start building today

No credit card required. Get up and running in minutes.

Start free trial

CTA With Background (Solid)

Boost your productivity

Stop reinventing the wheel. Use our battle-tested components and ship faster.

Get startedView demos

CTA With Background (Gradient)

Build something amazing

Our component library gives you the building blocks to create stunning user interfaces.

Start buildingSee examples

CTA With Background (Image Overlay)

Join our community

Connect with thousands of developers and designers who use TypeScript UI.

Join now

CTA Split (Image Right)

Ship faster with pre-built components

Focus on what makes your product unique while we handle the UI fundamentals. Our components are tested, accessible, and ready for production.

Browse componentsRead docs

CTA Split (Image Left)

Designed for developers

Every component comes with full TypeScript support, comprehensive documentation, and examples you can copy and paste.

View documentation

CTA Newsletter (Inline)

Stay up to date

Get notified about new components, features, and updates. No spam, unsubscribe anytime.

Subscribe

We respect your privacy. Unsubscribe at any time.

CTA Newsletter (Stacked)

Join our newsletter

Weekly tips, tricks, and updates delivered straight to your inbox.

Sign up

We respect your privacy. Unsubscribe at any time.

Usage

import {
  CTASimple,
  CTAWithBackground,
  CTASplit,
  CTANewsletter,
  CTABanner,
} from '@/components/ui/cta';

// Simple CTA
<CTASimple
  title="Ready to get started?"
  description="Join thousands of developers."
  primaryButton={{ text: 'Get started', href: '/signup' }}
  secondaryButton={{ text: 'Learn more', href: '/docs' }}
/>

// CTA With Background
<CTAWithBackground
  title="Boost your productivity"
  description="Use our battle-tested components."
  primaryButton={{ text: 'Get started', href: '#' }}
  variant="gradient" // 'solid' | 'gradient' | 'image'
  backgroundImage="/bg.jpg" // for 'image' variant
/>

// CTA Split
<CTASplit
  title="Ship faster"
  description="Focus on what makes your product unique."
  primaryButton={{ text: 'Browse', href: '#' }}
  imageSrc="/image.jpg"
  imageAlt="Description"
  imagePosition="right" // or 'left'
/>

// CTA Newsletter
<CTANewsletter
  title="Stay up to date"
  description="Get notified about new features."
  buttonText="Subscribe"
  variant="inline" // or 'stacked'
  onSubmit={(email) => console.log(email)}
/>

// CTA Banner
<CTABanner
  text="New version available!"
  link={{ text: 'Learn more', href: '#' }}
  icon={<MegaphoneIcon />}
  dismissible
/>

Props Reference

CTASimple

CTAWithBackground

CTASplit

CTANewsletter

CTABanner