Site footer

A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark.

Preview

Live · keyboard ready

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.

shadcn CLI

Also installs (3)

manicat-foundation
button
segmented-control

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "site-footer",
  "type": "registry:block",
  "title": "Site footer",
  "description": "A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/button.json",
    "https://manicat.viraza.net/r/segmented-control.json"
  ],
  "files": [
    {
      "path": "registry/blocks/site-footer/site-footer.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/site-footer/site-footer.tsx"
    },
    {
      "path": "registry/blocks/site-footer/site-footer.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/site-footer/site-footer.module.css"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.tsx",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.tsx"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.module.css",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.module.css"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/site-footer",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/site-footer",
    "markdown": "https://uiarc.dev/components/blocks/site-footer/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { SiteFooter } from "manicat/registry/blocks/site-footer/site-footer";

export function SiteFooterExample() {
  // Size containers have no width of their own: give the demo the whole row.
  return <div className="w-full"><SiteFooter /></div>;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Site footer Link columns, a newsletter box and legal links.

Live · keyboard ready

site-footer-link-columns-a-newsletter-box-and-legal-links-.tsxtsx

"use client";

import { SiteFooter } from "manicat/registry/blocks/site-footer/site-footer";
import type { ComparisonColumn, ComparisonSection } from "manicat/registry/blocks/comparison-table/comparison-table";

const columns: ComparisonColumn[] = [
  { id: "us", name: "Acme", caption: "$10 per seat", highlight: true },
  { id: "them", name: "Legacy suite", caption: "$24 per seat" },
];

export function SiteFooterColumnsExample() {
  return (
    <SiteFooter
      variant="columns"
      brand={{ name: "Acme" }}
      tagline="Software that gets out of the way."
      columns={[
        { title: "Product", links: [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }] },
        { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers" }] },
      ]}
      legal={[{ label: "Terms", href: "/terms" }, { label: "Privacy", href: "/privacy" }]}
      newsletter={{ title: "Stay in the loop", onSubscribe: async (email) => console.log(email) }}
    />
  );
}

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 Arc 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 Arc Button and SegmentedControl.