Highlight Card CTA

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.

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

Usage

The file also exports cta22Demo, 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 { Cta22, cta22Demo } from "@/components/blocks/cta/cta22";

export default function Page() {
  return <Cta22 {...cta22Demo} />;
}

Props

Types

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

interface CtaLink {
  label: string;
  href: string;
}

Behavior notes

• Fully static: metric values are pre-formatted strings passed in as props, not computed or animated.
• The outer card and each metric tile use the same border/background tokens so the tile grid reads as nested inside the card, not a separate section.
• Secondary button only renders when secondaryCta is provided.