Marketing footer

Pro

The footer of a marketing site: brand and a line about the product, link columns, an optional newsletter signup, and a bottom row with legal text, small links and social profiles.

npx prodular-ui add marketing-footer

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

A product site

Three link columns and a newsletter. Subscribe with an invalid address to see the error.

"use client"
import { MailIcon, MessagesSquareIcon, RssIcon } from "lucide-react"
import { MarketingFooter } from "@/components/ui/marketing-footer"
function Brand() {  return (    <span className="flex items-center gap-2 text-[15px] font-semibold tracking-tight">      <span aria-hidden="true" className="flex size-6 items-center justify-center rounded-md bg-primary text-xs text-primary-foreground">        R      </span>      Relay    </span>  )}
export default function MarketingFooterSite() {  return (    <div className="w-full overflow-hidden rounded-xl border bg-background">      <MarketingFooter        className="border-t-0"        brand={<Brand />}        description="Invoicing, collections and payments for finance teams that would rather not chase anyone."        newsletter={{          title: "Product updates",          description: "One email a month. No marketing in between.",          onSubscribe: () => new Promise((r) => setTimeout(r, 700)),        }}        columns={[          { title: "Product", links: [{ label: "Invoicing", href: "#" }, { label: "Collections", href: "#" }, { label: "Relay Analyst", href: "#" }, { label: "Pricing", href: "#" }] },          { title: "Company", links: [{ label: "About", href: "#" }, { label: "Customers", href: "#" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }] },          { title: "Developers", links: [{ label: "API reference", href: "#" }, { label: "Webhooks", href: "#" }, { label: "Status", href: "#" }, { label: "Changelog", href: "#" }] },        ]}        legal="© 2026 Relay Payments, Inc."        bottomLinks={[          { label: "Privacy", href: "#" },          { label: "Terms", href: "#" },          { label: "Cookies", href: "#" },        ]}        social={[          { label: "Changelog feed", href: "#", icon: RssIcon },          { label: "Community", href: "#", icon: MessagesSquareIcon },          { label: "Email us", href: "#", icon: MailIcon },        ]}      />    </div>  )}

Anatomy

<MarketingFooter brand={<Logo />} columns={columns} legal="© 2026 Relay" bottomLinks={legalLinks} />

Guidance

Use it when

The bottom of every marketing page.
Three or four columns of links people look for: product, company, developers, resources.
newsletter only if someone will actually send it.

Avoid

Repeating the whole navbar.
More than about six links per column.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Pass columns as { title, links: [{ label, href }] }[].
newsletter.onSubscribe(email) calls your email provider; throw with a message to show an error.
Social items need an icon and a label; the label is the accessible name.
It shares Section's container, so pass the same width as your sections.

API

MarketingFooter

Prop	Type	Description
brand / description	ReactNode	Logo and one line about the product.
columns	{ title, links }[]	Link columns.
newsletter	{ title?, description?, onSubscribe }	Email signup with states.
legal / bottomLinks / social	ReactNode / FooterLink[] / { label, href, icon }[]	The bottom row.

FooterNewsletter

Prop	Type	Default	Description
onSubscribe	(email) => Promise<void>		The signup on its own.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add marketing-footer# or, with the registry in components.jsonnpx shadcn@latest add @prodular/marketing-footer