Staaarter

Compact Bar CTA

A single-line, compact call-to-action bar with inline text and a link-style button, thinner than the Banner CTA. Text truncates and stays visually one line on desktop. Perfect for subtle, non-intrusive conversion prompts between content sections.

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

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

Usage

The file also exports cta33Demo, 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 { Cta33, cta33Demo } from "@/components/blocks/cta/cta33";

export default function Page() {
  return <Cta33 {...cta33Demo} />;
}

Props

PropTypeDefaultDescription
textstring"Version 3.0 is here with a redesigned dashboard."Inline message text, truncates on small widths.
actionLabelstring"See what's new"Label for the inline action link.
actionHrefstring"#"Link target for the inline action link.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The text uses `truncate` so it stays a single line on desktop rather than wrapping; the row itself uses `flex-wrap` so it can still stack on very narrow screens.
  • The action renders as a link-styled button (`variant="link"`) via `render={<Link/>}`, pointing at `#` by default and doing nothing beyond navigation.