Site footer

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/site-footer

• Markdown: https://ui.xzero.co.uk/components/blocks/site-footer/markdown

• Access: Free, open source

• Registry id: site-footer

• Source file: registry/blocks/site-footer/site-footer.tsx

• Built from: Motion

• Keywords: react footer, site footer, footer with newsletter, footer link columns, minimal footer, marketing footer

Use this as a starting point and replace the sample data with your own.

When to use

• The closing section of a marketing, docs, or product site.
• Footers that need a newsletter signup and a status link.
• Minimal one-row footers for app shells and docs.

When not to use

• Use a plain row with breadcrumb or links inside signed-in app screens.
• Use contact-section when the main goal is to start a conversation.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/site-footer

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { SiteFooter } from "@/components/xzero/blocks/site-footer/site-footer";

export function Footer() {
  return (
    <SiteFooter
      brand={{ name: "Acme", href: "/" }}
      tagline="Scheduling for small clinics."
      columns={[
        { title: "Product", links: [{ label: "Pricing", href: "/pricing" }, { label: "Changelog", href: "/changelog" }] },
        { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers" }] },
      ]}
      legal={[{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }]}
      newsletter={{ onSubscribe: email => subscribe(email) }}
      status={{ label: "All systems normal", tone: "success", href: "https://status.example.com" }}
    />
  );
}

API reference

SiteFooter

A site footer in three variants: link columns with a newsletter, one minimal row, or a closing large brand mark.

Prop	Type	Default	Description
variant	"columns" | "minimal" | "logo"	"columns"	columns pairs a newsletter with link columns, minimal is one quiet row, logo ends in a large fading mark.
brand	{ name: string; href?: string; mark?: ReactNode }	{ name: "Xzero" }	Brand shown with the tagline.
tagline	string	–	One short line under the brand.
columns	{ title: string; links: SiteFooterLink[] }[]	siteFooterExampleColumns	Link columns.
links	SiteFooterLink[]	–	Links for the minimal variant. Defaults to the first link of each column.
legal	SiteFooterLink[]	–	Small links beside the copyright, such as Privacy and Terms.
socials	SiteFooterLink[]	–	Social links.
newsletter	{ title?; description?; placeholder?; onSubscribe?: (email: string) => void | Promise<void> } | null	–	Newsletter signup. Throw or reject in onSubscribe to show an error. Pass null to hide it.
status	{ label: string; tone?: "success" | "warning" | "danger"; href?: string } | null	–	A system status link. Pass null to hide it.
year	number	–	Year in the copyright line.
onNavigate	(link: SiteFooterLink) => void	–	Called for every pressed link. Links without an href render as buttons and only call this.
className	string	–	Extra class on the footer.

SiteFooterLink

Prop	Type	Default	Description
label (required)	string	–	Link text.
href	string	–	Destination.
external	boolean	–	Opens in a new tab and shows an outward arrow.

SiteFooterBlock

Default export: a preview with a layout switcher.

Prop	Type	Default	Description
variant	SiteFooterVariant	"columns"	Initial variant.

Accessibility

• Renders a footer landmark with labelled link groups.
• The newsletter validates in place with a message tied to the field, and confirms without a toast.
• External links show an outward arrow and open in a new tab.
• Status tone is paired with its label, not shown by color alone.

Motion

• The subscribe button morphs to its confirmed state while the form keeps its width.
• The logo variant's large mark fades toward the bottom edge.
• Reduced motion swaps states without travel.

Responsive behavior

• Container queries: below 760px the newsletter stacks above the columns; below 520px columns become two per row and the bottom row stacks.
• Link rows wrap rather than truncate.

Performance

• Static markup apart from the newsletter form; no observers or timers.

Notes for AI

• Defaults are Xzero sample content; pass brand, columns, legal, socials, and newsletter for real sites.
• Pass newsletter={null} and status={null} when you have no backend for them.
• Composes Xzero Button and SegmentedControl.

Related

• Site header: A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.
• Hero section: Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.
• FAQ section: FAQs as an accordion, a topic rail, or a searchable list that highlights matches.
• Contact section: A validated contact form that morphs into a confirmation, support channels, and office cards with local times.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt