Staaarter

Two Path Closing CTA

A closing call-to-action offering two routes side by side, separated by a vertical rule (a top rule on mobile). Each column has a title, a short pitch, a dotted-rule list of what to expect, and its own pill button, the left column solid, the right column outline.

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/two-path-closing-cta.json

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

Usage

The file also exports cta80Demo, 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 { Cta80, cta80Demo } from "@/components/blocks/cta/cta80";

export default function Page() {
  return <Cta80 {...cta80Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Two ways to get started"Centered heading above the two columns.
paths[PathColumn, PathColumn]noneExactly two path columns: left renders with a solid button, right with an outline button.
classNamestringnoneExtra classes for the outer section element.

Types

interface PathColumn {
  title: string;
  pitch: string;
  expect: string[];
  actionLabel: string;
  actionHref: string;
}

Behavior notes

  • Both column buttons are inert links (`render={<Link/>}`); the left column always renders the solid/primary variant and the right column always renders the outline variant regardless of content.
  • The 'what to expect' list items are separated by dashed hairline rules (`border-t border-dashed`) purely for visual rhythm, not an interactive checklist.