Newsletter Footer

A newsletter-forward footer: a parenthetical label and oversized heading sit beside a pill-shaped email field with an inline submit button, over a ruled bottom bar carrying the wordmark, nav links, and social links. Perfect for content sites and product marketing pages that want the newsletter signup to be the loudest thing in the footer.

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/newsletter-heading-footer.json

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

Usage

The file also exports footer16Demo, 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 { Footer16, footer16Demo } from "@/components/blocks/footer/footer16";

export default function Page() {
  return <Footer16 {...footer16Demo} />;
}

Props

Prop	Type	Default	Description
label	string	undefined	Parenthetical label above the heading, e.g. "Stay in the loop".
heading	ReactNode	none	Oversized heading next to the email field.
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 pill submit button.
wordmark	string	none	Lowercase brand wordmark in the bottom bar.
navLinks	FooterLink[]	[]	Nav links in the bottom bar.
socials	FooterLink[]	[]	Social links in the bottom bar.
copyright	string	undefined	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 its submit button are decorative: there is no client-side state and no onSubmit handler, matching every other static form in the Blocks catalog.
label only renders when set, wrapped in literal parentheses to match the reference layout.
navLinks and socials each render only when they have at least one entry, and are independent of one another.

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.