footers /
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 minimalWhere 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.