Minimal Footer

Single-row footer with copyright on the left and social icons on the right.

Preview

Source

tsx
"use client";

import { Twitter, Github, Linkedin } from "lucide-react";

export default function FooterMinimal() {
  return (
    <footer className="w-full border-t border-border bg-background">
      <div className="container mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 px-6 py-6">
        <p className="text-sm text-muted-foreground">
          © {new Date().getFullYear()} Acme, Inc. All rights reserved.
        </p>
        <div className="flex items-center gap-4 text-muted-foreground">
          <a href="#" aria-label="Twitter" className="hover:text-foreground transition-colors">
            <Twitter className="w-4 h-4" />
          </a>
          <a href="#" aria-label="GitHub" className="hover:text-foreground transition-colors">
            <Github className="w-4 h-4" />
          </a>
          <a href="#" aria-label="LinkedIn" className="hover:text-foreground transition-colors">
            <Linkedin className="w-4 h-4" />
          </a>
        </div>
      </div>
    </footer>
  );
}
Claude Code Instructions

CLI Install

npx innovations add minimal

Where to use it

Use for landing pages, single-page sites, or apps where footer real estate should be minimal. In Astro (src/layouts/Layout.astro): import FooterMinimal from '../components/innovations/footers/minimal'; // Place after <slot /> in the layout body Customize: edit the brand name inline; swap or add social icons from lucide-react.