Staaarter

Contact CTA

A centered contact call-to-action section: a small availability pill, a large headline, a short paragraph, and two actions, a primary button and a direct email link. Perfect for freelancer/agency contact 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/contact-cta.json

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

Usage

The file also exports cta68Demo, 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 { Cta68, cta68Demo } from "@/components/blocks/cta/cta68";

export default function Page() {
  return <Cta68 {...cta68Demo} />;
}

Props

PropTypeDefaultDescription
availabilityLabelstring"Available for new projects"Text inside the small availability pill above the headline.
headingstring"Let's talk about your next project"Large headline.
descriptionstring"Whether you have a fully scoped brief or just an idea on a napkin, I'd love to hear about it. Usually reply within a day."Short supporting paragraph.
primaryLabelstring"Get in touch"Label for the primary button.
primaryHrefstring"#"Link target for the primary button.
emailstring"[email protected]"Email address shown and linked as a `mailto:` action.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The availability pill has a static primary-colored dot; it does not reflect any real, live availability status, it's a fixed decorative badge.
  • The primary button is an inert link (`render={<Link/>}`) pointing at `#` by default; the email action is a real `mailto:` link built from the `email` prop.