Staaarter

Pill Tags CTA

Newsletter/content-subscription call-to-action that opens with a wrapped, slightly-scattered cluster of topic badges showing what subscribers receive, followed by a heading, description, and subscribe button.

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 badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/pill-tags-cta.json

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

Usage

The file also exports cta27Demo, 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 { Cta27, cta27Demo } from "@/components/blocks/cta/cta27";

export default function Page() {
  return <Cta27 {...cta27Demo} />;
}

Props

PropTypeDefaultDescription
topicsstring[]noneTopic labels rendered as badge pills above the heading.
headingstringnoneMain heading below the topic pills.
descriptionstringnoneSupporting copy under the heading.
primaryLabelstring"Subscribe for free"Label for the subscribe button.
primaryHrefstring"#"Link target for the subscribe button.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The 'scattered' look is a light alternating rotation (`rotate-1`/`-rotate-1`) applied every third badge in a wrapped flex row, not free-form/randomized positioning, so it renders identically on every load.
  • Fully static list of topics; no filtering or selection state.
  • The subscribe button is an inert link, not a working form submission.