Get the latest updates, articles, and resources delivered straight to your inbox every week. Join thousands of subscribers.
No spam. Unsubscribe anytime.
Minimal centered call-to-action with heading, description, and action buttons. Perfect for newsletter signups and conversion sections.
Centered call-to-action for newsletter and conversion sections: an optional badge (always paired with a mail icon), a highlightable heading, a description, a wrapping row of buttons, and a small footnote line beneath them.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/cta8"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/cta8"This installs the block to components/beste/block/cta8.tsx and the Badge and Button shadcn/ui primitives it uses.
The installed file exports cta8Demo alongside the block: the exact props behind the preview above. Spread it to get a working CTA in one line.
import { Cta8, cta8Demo } from "@/components/beste/block/cta8";
export default function Page() {
return <Cta8 {...cta8Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Cta8 } from "@/components/beste/block/cta8";
export default function Page() {
return (
<Cta8
badge={{ label: "Newsletter" }}
heading="Never miss a <strong>release</strong>"
description="One email a month, product notes only, no filler."
buttons={[
{ label: "Subscribe", href: "/subscribe" },
{ label: "See an example", href: "/archive", variant: "outline" },
]}
footnote="No spam. Unsubscribe anytime."
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Optional pill badge above the heading, always rendered with a leading mail icon |
heading | string | – | Headline HTML; wrap a phrase in <strong> to color-highlight it |
description | string | – | Supporting paragraph under the heading |
buttons | ButtonItem[] | [] | CTA buttons, centered and wrapping |
footnote | string | – | Small muted line under the buttons |
className | string | – | Extra classes for the outer <section> |
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};Mail icon before its label, regardless of variant; there's no way to swap or hide the icon short of omitting badge entirely.badge is set without a variant, it falls back to "secondary" rather than "default".heading is rendered via dangerouslySetInnerHTML following the project's highlight convention: only text wrapped in <strong> gets text-primary, the rest stays the default heading color.footnote renders at text-xs text-muted-foreground beneath the button row and is entirely optional; the demo uses it for "No spam. Unsubscribe anytime."variant="default" per item and link to button.href ?? "#"; the row is centered (justify-center) rather than left-aligned, matching this block's fully centered layout.