How do I install Simple CTA With Images?

Run npx shadcn@latest add @aceternity/simple-cta-with-images in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Simple CTA With Images responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Simple CTA With Images is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

CTA Sections

7 / 7

Simple CTA With Images

A horizontal CTA section with overlapping user avatars, star ratings, and a call-to-action button. Avatars show tooltips on hover with spring-based animations.

Get realistic with
Photorealistic AI today.

Join the waitlist and be the first one to experience photorealism at scale. Get additional 50% discount on the first 100 people.

Trusted by 27,000+ creators

User avatars stack horizontally with negative margins, each slightly rotated for a casual look. On hover, a tooltip appears with spring animation showing the person's name and designation. The tooltip follows the cursor horizontally using a motion value and transform.

Five star icons display next to the avatars with optional visibility via props. Below, text shows the number of trusted users. The avatars animate in on mount with staggered scale and opacity using Framer Motion's animate function.

The gradient button includes an arrow icon that shifts right on hover. The section uses flexbox to arrange content on the left and button on the right, stacking vertically on mobile.

Works well for SaaS waitlists, product launches, course enrollments, and any CTA where social proof increases conversion.

More from CTA Sections

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

CTA With Background Noise CTA With Dashed Grid Lines Centered Around Testimonials CTA Sections Testimonials

About this block