Call to action

Block

A closing band with one clear action.

Installs components/ui/call-to-action.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/call-to-action.json

Build the next screen with parts you own

Start free, upgrade when your team needs the full kit.

30-day refund. No card for the free plan.

When to use #

Use it for

The end of a page or section.

Skip it when

More than one action competes.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/call-to-action.json

Adds its 2 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 { Button } from "@/components/ui/button"
import { CallToAction } from "@/components/ui/call-to-action"

export function CallToActionDemo() {
  return (
    <CallToAction
              title="Build the next screen with parts you own"
              description="Start free, upgrade when your team needs the full kit."
              actions={
                <>
                  <Button size="lg">Get started</Button>
                  <Button size="lg" variant="secondary">Talk to sales</Button>
                </>
              }
              note="30-day refund. No card for the free plan."
            />
  );
}

API reference #

CallToAction

component

PropTypeDefault

title *string—

descriptionstring—

actions *ReactNode—

noteReactNode—

tone"plain" | "tinted""tinted"

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.