Staaarter

Stats CTA

A data-driven conversion section: a row of large stat tiles builds credibility before a centered heading, supporting paragraph, and primary/secondary action buttons. Perfect for closing a sales page with proof rather than just a promise.

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 button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/stats-cta.json

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

Usage

The file also exports cta12Demo, 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 { Cta12, cta12Demo } from "@/components/blocks/cta/cta12";

export default function Page() {
  return <Cta12 {...cta12Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Trusted at scale"Small label above the heading.
headingstringnoneMain call-to-action heading.
descriptionstringnoneSupporting paragraph under the heading.
statsStatItem[]noneRow of 3-4 stat tiles shown above the heading.
primaryLabelstring"Get started free"Label for the primary button.
primaryHrefstring"/signup"Link for the primary button.
secondaryLabelstring"Talk to sales"Label for the secondary button.
secondaryHrefstring"/contact"Link for the secondary button.
classNamestringnoneExtra classes for the outer section element.

Types

interface StatItem {
  value: string;
  label: string;
}

Behavior notes

  • Fully static: stats, heading, and buttons are all presentational; both buttons are real links (`render={<Link/>}`) but point at placeholder routes.
  • The stat grid stacks to two columns on mobile and four across on larger screens.