CTA section

A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.

Preview

Live · keyboard ready

Start building in minutes

Set up a workspace, invite your team, and ship the first project this week. Free for 14 days.

No credit card required

When to use

The last section of a landing page, asking for a trial or demo.
An in-page prompt beside a product visual that shows the outcome.
A slim promotional banner above content.

When not to use

The first screen of a page. Use Hero section.
Collecting an email. Use Newsletter signup.
A persistent site-wide notice. Use Announcement bar.

shadcn CLI

Also installs (3)

manicat-foundation
button
segmented-control

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-section",
  "type": "registry:block",
  "title": "CTA section",
  "description": "A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/button.json",
    "https://manicat.viraza.net/r/segmented-control.json"
  ],
  "files": [
    {
      "path": "registry/blocks/cta-section/cta-section.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/cta-section/cta-section.tsx"
    },
    {
      "path": "registry/blocks/cta-section/cta-section-data.ts",
      "type": "registry:component",
      "target": "@components/manicat/blocks/cta-section/cta-section-data.ts"
    },
    {
      "path": "lib/media.ts",
      "type": "registry:lib",
      "target": "@components/manicat/lib/media.ts"
    },
    {
      "path": "registry/blocks/cta-section/cta-section.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/cta-section/cta-section.module.css"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.tsx",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.tsx"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.module.css",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.module.css"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/cta-section",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/cta-section",
    "markdown": "https://uiarc.dev/components/blocks/cta-section/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { CtaSection } from "manicat/registry/blocks/cta-section/cta-section";

export function CtaSectionExample() {
  // Size containers have no width of their own: give the demo the whole row.
  return <div className="w-full"><CtaSection /></div>;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Closing banner The call to action at the end of a landing page.

Live · keyboard ready

Start building today

Free to use. Every component is yours to edit.

Get started Talk to us

No credit card required

closing-banner-the-call-to-action-at-the-end-of-a-landing-page-.tsxtsx

"use client";

import { CtaSection } from "manicat/registry/blocks/cta-section/cta-section";

export function CtaSectionClosingExample() {
  return (
    <CtaSection
      variant="centered"
      title="Start building today"
      description="Free to use. Every component is yours to edit."
      primaryAction={{ label: "Get started", href: "/docs" }}
      secondaryAction={{ label: "Talk to us", href: "/contact" }}
      note="No credit card required"
    />
  );
}

Keyboard interactions

Keys	Action
Tab	Moves through the actions, then the dismiss button in the banner.
Enter or Space	Runs an action or dismisses the banner.

Accessibility

Each variant is a section labelled by its heading.
Actions with href are real links; others are buttons. Simulated confirmations announce politely.
The dismiss button has the name "Dismiss"; the banner closes its gap so focus order stays clean.
The setup card is aria-hidden: the copy beside it carries the message.

Motion

Primary actions lean their arrow forward on hover; buttons press to .97 and morph their width when the label changes.
Split: the stage rises into view once, then the setup card ticks its three steps, fills its progress line, and slides in teammates' faces.
Banner: dismissing fades it, scales it to .98, and springs its height closed so the page below moves up smoothly.
Reduced motion shows the finished setup card and removes travel.

Responsive behavior

Split stacks copy above the visual below 860px container width.
Below 560px actions go full width and stack, and the banner puts its text above the action and dismiss button.
Headings scale with the container between 30px and 52px.

Performance

The setup card runs three timers once after it enters view; everything else is CSS transitions.
No images except up to four small avatars.

Notes for AI

Use centered at the end of a landing page, split mid page next to a relevant product state, and banner at the top of an app or docs page.
Pass href for real navigation. Leave both href and onClick out only for previews.
One primary and at most one secondary action. Keep labels to two or three words with a verb.
Edit cta-section-data.ts for the sample copy and the setup card content.