Newsletter Subscription Footer

A footer led by a bordered, centered email subscription card, then navigation columns, and a bottom bar carrying the copyright, legal links, and social links. Perfect for content sites and businesses that want email-list growth to have real visual weight in the footer, not just a small side field.

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-subscription-footer.json

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

Usage

The file also exports footer36Demo, 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 { Footer36, footer36Demo } from "@/components/blocks/footer/footer36";

export default function Page() {
  return <Footer36 {...footer36Demo} />;
}

Props

Prop	Type	Default	Description
wordmark	string	none	Brand wordmark above the navigation columns.
heading	ReactNode	none	Heading inside the subscription card.
description	string	undefined	Short line under the heading.
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.
columns	FooterLinkGroup[]	none	Navigation link columns below the subscription card.
socials	FooterLink[]	[]	Social links in the bottom bar.
legalLinks	FooterLink[]	[]	Legal link row in the bottom bar.
copyright	string	none	Copyright line in the bottom bar.
className	string	none	Extra classes for the outer footer element.

Types

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

type FooterLinkGroup = { title: string; links: FooterLink[] };

Behavior notes

The subscription card's 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.
socials and legalLinks are both optional and independently collapse to nothing when empty.

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.