CTA block

Block

The closing call to action: the promise again, one specific next step and a reassurance line.

Installs components/ui/cta-block.tsxDepends on lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/cta-block.json

Start today

Close October in a morning.

Start the trial

14 days free · no card · import your September close

When to use #

Use it for

The end of a landing or pricing page.
A technical audience that starts from a command.

Skip it when

Several competing actions.
A slogan with no concrete step.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/cta-block.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { type ReactNode } from "react"
import { CtaBlock } from "@/components/ui/cta-block"

function Frame({ children }: { children: ReactNode }) {
  return <div className="w-full overflow-hidden rounded-[14px] shadow-[0_0_0_1px_var(--border)]">{children}</div>;
}

const ctas: Parameters<typeof CtaBlock>[0] = { eyebrow: "Start today", title: "Close October in a morning.", reassurance: "14 days free · no card · import your September close", primary: { label: "Start the trial", href: "#" } };

export function CtaBlockDemo() {
  return <Frame><CtaBlock {...ctas} /></Frame>;
}

API reference #

CtaBlock

component

PropTypeDefaultDescription

eyebrowstring—

title *string—

reassurancestring—e.g. "14 days free · no card · import your September close".

primaryBlockAction—

secondaryBlockAction—

actionReactNode—Custom content in place of the actions, e.g. an install command.

tone"ink" | "page""ink"

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.