Footer
.mdSite footer with a brand blurb, four link columns, a newsletter field that swaps to an inline success state, and a base row with legal links and a pulsing status dot.
footernewsletterlinksnavigationsite
Installation
$npx shadcn@latest add @geturui/footer-block
Also installs: Animated Badge, Input
Usage
usage.tsx
1import { FooterBlock } from "@/components/blocks/footer-block";
2
3export default function SiteFooter() {
4 return (
5 <FooterBlock
6 brand={{ name: "Fieldnote", description: "Research notes your whole team can search." }}
7 columns={[
8 { title: "Product", links: [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }] },
9 { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers", badge: "Hiring" }] },
10 ]}
11 newsletter={{
12 title: "Product updates",
13 onSubscribe: (email) => fetch("/api/subscribe", { method: "POST", body: email }).then(() => undefined),
14 }}
15 copyright="© 2026 Fieldnote Inc."
16 />
17 );
18}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
brand | { name: string; description?: string; href?: string } | — | Logo tile, name and blurb. |
columns | { title: string; links: { label; href; badge? }[] }[] | — | Link columns; four fit best. |
newsletter | { title; description?; placeholder?; onSubscribe? } | null | — | Email signup. Resolve onSubscribe to show the success state. null hides it. |
copyright | string | — | Base-row text. |
legal | FooterLink[] | — | Base-row links. |
status | string | null | "All systems normal" | Status line with a pulsing dot. null hides it. |
socials | { label; href; icon }[] | — | Icon links; label becomes the aria-label. |
Accessibility
- Links sit in a nav labelled Footer, grouped under real headings.
- The newsletter form is labelled by its heading, validates the email with an inline error, and announces success in a status region.
- Icon-only social links carry aria-labels.