CTA Footer

A dark, inverted closing-CTA footer for the very bottom of a landing page: a big statement heading up top, an email signup field beside a submit button, a hairline rule, then a compact row of links and a copyright line. Uses inverted semantic tokens (bg-foreground/text-background) rather than a literal dark palette, so it still tracks the site's own theme.

By Staaarter Team

Footer

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/dark-closing-cta-footer.json

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

Usage

The file also exports footer20Demo, 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 { Footer20, footer20Demo } from "@/components/blocks/footer/footer20";

export default function Page() {
  return <Footer20 {...footer20Demo} />;
}

Props

Prop	Type	Default	Description
statement	ReactNode	none	Big closing statement heading.
description	string	undefined	Short line under the statement.
emailFieldLabel	string	none	Accessible label for the email input (visually hidden).
placeholder	string	undefined	Placeholder text for the email input.
submitLabel	string	none	Label for the submit button.
links	FooterLink[]	[]	Compact link row below the hairline rule.
copyright	string	none	Copyright line at the very bottom.
className	string	none	Extra classes for the outer footer element.

Types

type FooterLink = { label: string; href: string };

Behavior notes

The email field and submit button are entirely decorative: no client-side state and no onSubmit handler, matching every other static form in the Blocks catalog.
links renders only when it has at least one entry; description is likewise optional.
The section uses bg-foreground/text-background (inverted semantic tokens) instead of literal dark colors, so it still respects the site's own light/dark theme rather than hardcoding one.

More Footer Blocks

View all →

Minimal Centered Footer

Compact centered footer with a lowercase wordmark, tagline, uppercase link row, and a social row over a hairline rule.

CTA Footer

Footer opening with a light closing heading and accent buttons, then a slim wordmark and link bottom bar.

Editorial Newsletter Footer

Light footer with a wordmark, tagline, newsletter signup, three link columns, and a legal bottom bar.

Brand Column Footer

Four-column footer with a wide brand column, oversized wordmark, and three ruled link columns.

Live Studio Clock Footer

Footer built around a real ticking clock with a pulsing open/closed status, city, and day.

Split CTA Footer

Two-column footer with a pill CTA and email on the left, a stacked oversized nav on the right.