Staaarter

Accent Sidebar CTA

A card with a colored accent stripe on the left border, a heading and description inside, and an action button below. Perfect for attention-grabbing inline conversion prompts.

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

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

Usage

The file also exports cta36Demo, 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 { Cta36, cta36Demo } from "@/components/blocks/cta/cta36";

export default function Page() {
  return <Cta36 {...cta36Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Migrate your data in one click"Card heading.
descriptionstring"Import your existing projects from a CSV or connect a live database. We'll handle the mapping for you."Supporting copy inside the card.
buttonLabelstring"Start migration"Label for the action button.
buttonHrefstring"#"Link target for the action button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The accent stripe is a `border-l-4 border-l-primary` override layered on top of the card's regular `border-border`, purely decorative.
  • The button is an inert link (`render={<Link/>}`) pointing at `#` by default; there is no real migration flow wired up.