Staaarter

Steps CTA

Shows how easy it is to get started: three numbered steps sit in a row (stacked on mobile), each with a circular number badge, a short title, and a short description, connected by a horizontal line on larger screens, ending in a single call-to-action button below.

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/steps-cta.json

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

Usage

The file also exports cta19Demo, 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 { Cta19, cta19Demo } from "@/components/blocks/cta/cta19";

export default function Page() {
  return <Cta19 {...cta19Demo} />;
}

Props

PropTypeDefaultDescription
headingstringnoneSection heading above the steps.
descriptionstringnoneSupporting paragraph under the heading.
stepsStepItem[]noneThe three (or more) numbered steps, in order.
buttonLabelstring"Get started free"Label for the closing button.
buttonHrefstring"/signup"Link for the closing button.
classNamestringnoneExtra classes for the outer section element.

Types

interface StepItem {
  title: string;
  description: string;
}

Behavior notes

  • Fully static: the numbered badges and connecting line are decorative, not an interactive stepper; the button is a real link to a placeholder route.
  • The connecting horizontal line between step badges only renders on `sm` and up, since it depends on the steps sitting in a single row.