CTA Footer Block
NewPro
The end of a page: moving lines behind a call to action with email capture, above a footer with link columns and a legal row.
Customize
#ff784f
1
When to use it
- The last screen of a landing page, with a newsletter or early access form
- A site-wide footer that also collects sign-ups
- Launch pages that need a second chance to convert before the page ends
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 280
Installation
CTA Footer Block is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy cta-footer-block.tsx into components/ui and run npm install motion.
Usage
import { CtaFooterBlock } from "@/components/ui/cta-footer-block";
<CtaFooterBlock
title="Be first in line"
subtitle="One email when the beta opens. Nothing else."
buttonLabel="Get early access"
onSubmit={async (email) => {
const res = await fetch("/api/subscribe", { method: "POST", body: JSON.stringify({ email }) });
if (!res.ok) throw new Error("Subscribe failed");
}}
brand="Fieldnote"
columns={[
{ title: "Product", links: [{ label: "Pricing", href: "/pricing" }, { label: "Changelog", href: "/changelog" }] },
{ title: "Company", links: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
]}
copyright="© 2026 Fieldnote"
legal={[{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }]}
/>Props
20 properties| Property | Type | Default | Description |
|---|---|---|---|
| title | string | — | Section heading. |
| eyebrow | string | — | Short line above the heading. |
| subtitle | string | — | Supporting line under the heading. |
| onSubmit | (email) => void | Promise<void> | — | Receives the checked email. Throw or reject to show errorMessage and let the visitor retry. |
| inputLabel | string | "Email address" | Floating label of the field. |
| buttonLabel | string | "Sign up" | Label of the submit button. |
| note | ReactNode | — | Small print under the form, such as how often you write. |
| errorMessage | string | "That did not go through. Try again in a moment." | Shown when onSubmit fails. |
| successTitle | string | "You are on the list" | First line of the message that replaces the form. |
| successText | string | "Check your inbox to confirm your address." | Second line of the message that replaces the form. |
| background | ReactNode | — | Replaces the moving lines and glow, for example with another Mekai background. |
| speed | number | 1 | Speed multiplier of the moving lines and glow. |
| brand | ReactNode | — | Your logo or name, at the start of the footer. |
| tagline | string | — | Short line under the brand. |
| columns | CtaFooterColumn[] | [] | Link columns: a title and links with a label and an href. A link without an href is plain text. |
| copyright | string | — | Text on the last row. Pass the year yourself. |
| legal | CtaFooterLink[] | [] | Small links on the last row, such as terms and privacy. |
| color | string | "#ff784f" | Accent for the background and the button, as a hex value. |
| as | "h1" | "h2" | "h2" | Heading level. |
| className | string | — | Extra classes for the section. |
Dependencies: motion