Installation
Usage
import { SiteFooter } from "@/components/site-footer"
export default function Page() {
return <SiteFooter />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / tagline | string | "Northwind" / … | Name and one line about it. |
| columns | { title: string; links: { label; href }[] }[] | 3 examples | Link columns. |
| newsletter | { title; description?; action?; onSubscribe? } | null | shown | Sign-up form; onSubscribe gets the email (throw to show an error), else it posts to action. |
| socials | { network: "x" | "github" | "linkedin" | "youtube" | "instagram"; href }[] | X, GitHub, LinkedIn | Icon links. |
| legal | { label; href }[] | Privacy, Terms | Bottom-bar links. |
| copyright | string | brand | Text after "© <year>". |
| year | number | this year | Copyright year; filled in the browser so a prerendered page never bakes in its build year. |
| status | { label; href; tone? } | null | All systems normal | A status line with a live dot; null hides it. |
| wordmark | boolean | true | The brand set huge along the bottom, lit by the pointer. |
| backToTop | boolean | true | A Back to top button in the bottom bar. |
Accessibility
- Columns are lists under headings in a <nav> labelled "Footer".
- Icon links are named for screen readers, e.g. "Northwind on GitHub".
- The newsletter field has a label, autocomplete="email", and its result is announced politely.
- The wordmark is decorative and hidden; back to top jumps instead of scrolling under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.