Mega Footer

A complete, full-width studio mega footer: a brand column with a wordmark, tagline, and social row on the left, four link columns covering the rest of the site, and a bottom bar carrying the copyright and legal links. Perfect as the single, catch-all footer for a larger marketing or product site.

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 dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/mega-footer.json

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

Usage

The file also exports footer21Demo, 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 { Footer21, footer21Demo } from "@/components/blocks/footer/footer21";

export default function Page() {
  return <Footer21 {...footer21Demo} />;
}

Props

Prop	Type	Default	Description
wordmark	string	none	Brand wordmark in the brand column.
tagline	string	undefined	Short line under the wordmark.
socials	FooterLink[]	[]	Social links below the tagline.
columns	FooterLinkGroup[]	none	Four link columns.
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

socials and legalLinks are both optional and independently collapse to nothing when empty.
Purely presentational: every link (brand socials, column links, legal links) is a real next/link with no client-side state.

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.