# Footer Minimal Centered — React Footer Component

> A quiet centered footer: logo mark, a link row with a pill that glides between hovered links, round social buttons and a back-to-top control.

- Category: [Footers](https://pixelpapa.com/components/footers.md)
- Tags: footer, minimal, centered, hover
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/footers/footer-minimal-centered

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/footer-minimal-centered.json"
```

The file is written to `components/pixelpapa/footer-minimal-centered.tsx`. To install manually, run `npm install lucide-react motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowUp, AtSign, Mail, Rss } from "lucide-react";
import { motion } from "motion/react";
import { useState } from "react";

type FooterMinimalCenteredProps = {
  links?: string[];
};

const defaultLinks = ["Work", "Studio", "Journal", "Careers", "Contact"];

export default function FooterMinimalCentered({ links = defaultLinks }: FooterMinimalCenteredProps) {
  const [hovered, setHovered] = useState<string | null>(null);

  return (
    <footer className="relative w-full bg-background px-6 py-16">
      <div aria-hidden className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
        <a href="#" aria-label="Fern & Field home" className="group flex size-12 items-center justify-center rounded-2xl border border-border bg-card">
          <svg viewBox="0 0 24 24" className="size-6 text-primary transition-transform duration-500 group-hover:rotate-[20deg]" aria-hidden>
            <path d="M12 21V9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" />
            <path d="M12 12c0-4 2.5-7 7-8 0 4.5-2.5 7.5-7 8Z" fill="currentColor" opacity="0.9" />
            <path d="M12 15c0-3-2-5.5-6-6.5 0 3.5 2 6 6 6.5Z" fill="currentColor" opacity="0.5" />
          </svg>
        </a>
        <p className="mt-5 max-w-sm text-sm text-pretty text-muted-foreground">
          Fern &amp; Field is an independent studio making calm software for small farms.
        </p>

        <nav aria-label="Footer" className="mt-8" onPointerLeave={() => setHovered(null)}>
          <ul className="flex flex-wrap justify-center gap-1 text-sm font-medium">
            {links.map((link) => (
              <li key={link}>
                <a
                  href="#"
                  onPointerEnter={() => setHovered(link)}
                  onFocus={() => setHovered(link)}
                  onBlur={() => setHovered(null)}
                  className="relative block rounded-full px-4 py-2 text-muted-foreground transition-colors hover:text-foreground"
                >
                  {hovered === link && (
                    <motion.span
                      layoutId="footer-minimal-centered-pill"
                      className="absolute inset-0 rounded-full bg-muted"
                      transition={{ type: "spring", stiffness: 380, damping: 30 }}
                    />
                  )}
                  <span className="relative">{link}</span>
                </a>
              </li>
            ))}
          </ul>
        </nav>

        <div className="mt-8 flex items-center gap-2">
          {[
            { icon: AtSign, label: "Social profile" },
            { icon: Mail, label: "Email us" },
            { icon: Rss, label: "RSS feed" },
          ].map(({ icon: Icon, label }) => (
            <motion.a
              key={label}
              href="#"
              aria-label={label}
              whileHover={{ y: -3 }}
              transition={{ type: "spring", stiffness: 400, damping: 18 }}
              className="flex size-9 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:border-primary/40 hover:text-primary"
            >
              <Icon className="size-4" />
            </motion.a>
          ))}
        </div>

        <div className="mt-10 flex w-full items-center justify-between border-t border-border pt-6 text-xs text-muted-foreground">
          <p>© 2026 Fern &amp; Field Studio</p>
          <a href="#" className="group inline-flex items-center gap-2 transition-colors hover:text-foreground">
            Back to top
            <span className="flex size-6 items-center justify-center overflow-hidden rounded-full border border-border">
              <ArrowUp className="size-3 transition-transform duration-300 group-hover:-translate-y-0.5" />
            </span>
          </a>
        </div>
      </div>
    </footer>
  );
}
```

## AI prompt

```text
Add the "Footer Minimal Centered" component from PixelPapa UI to this project.

What it is: A quiet centered footer: logo mark, a link row with a pill that glides between hovered links, round social buttons and a back-to-top control.
Category: Footers. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/footer-minimal-centered.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/footer-minimal-centered.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/footer-minimal-centered" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More footers

- [Footer App Style](https://pixelpapa.com/components/footers/footer-app-style.md) (Pro): A compact application footer with a working language menu that retranslates the links and a system / light / dark theme switch with a sliding thumb.
- [Footer CTA Above](https://pixelpapa.com/components/footers/footer-cta-above.md) (Pro): A rounded call-to-action card that overlaps the top edge of the footer, with a sheen that tracks the cursor and link columns underneath.
- [Footer Dark Gradient Glow](https://pixelpapa.com/components/footers/footer-dark-gradient-glow.md) (Pro): An always-dark footer lit by a breathing horizon glow, with a faint perspective grid, twinkling points and link columns that brighten on hover.
- [Footer Editorial Serif](https://pixelpapa.com/components/footers/footer-editorial-serif.md) (Pro): A magazine-style colophon: a large serif sign-off that reveals line by line, hairline-ruled numbered columns and a live local clock.
- [Footer Giant Wordmark](https://pixelpapa.com/components/footers/footer-giant-wordmark.md): Compact link columns above an oversized brand word whose letters spring up out of the clipped bottom edge when the footer enters view.
- [Footer Marquee Links](https://pixelpapa.com/components/footers/footer-marquee-links.md): Oversized footer links drift past in two opposing marquee rows that slow to a stop on hover, above a small grid of studio details.