Staaarter

Newsletter CTA with Social Proof

Call-to-action for a newsletter signup that leans on social proof to boost conversion: an overlapping avatar stack, a live-feeling subscriber count line, and a short italic testimonial with attribution, all above the subscribe button.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/newsletter-social-proof-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta10.tsx instead.

Usage

The file also exports cta10Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta10, cta10Demo } from "@/components/blocks/cta/cta10";

export default function Page() {
  return <Cta10 {...cta10Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Get the newsletter"Main heading above the description.
descriptionstringnoneSupporting copy under the heading.
subscribersSubscriber[]nonePeople shown in the overlapping avatar stack, in display order.
subscriberCountstring"2,400+"Subscriber count shown next to the avatar stack.
quotestringnoneShort testimonial quote.
quoteAuthorstringnoneName of the person quoted.
quoteRolestringnoneRole or company of the person quoted.
primaryLabelstring"Subscribe for free"Label for the subscribe button.
primaryHrefstring"#"Link target for the subscribe button.
classNamestringnoneExtra classes for the outer section element.

Types

interface Subscriber {
  name: string;
  avatar?: { src: string; alt: string };
}

Behavior notes

  • Fully static/decorative: the subscriber count and quote are hand-authored copy, not a live count or a fetched review.
  • Avatars fall back to initials (via `AvatarFallback`/`initialsFromName`) when a subscriber has no photo, so the stack never breaks if `avatar` is omitted.
  • The subscribe button is an inert link (`primaryHref`), not a working form submission.