Synais FooterNew

When to use

• A finance or SaaS footer that needs a newsletter, socials and four link columns
• Dark sites that want the brand name to be the last thing on the page

When not to use

• Light pages — the cream wordmark is drawn for near-black
• Brand names much longer than six letters; the wordmark is sized to fill the width

Installation

Add Synais Footer with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.

Requires React 19 · Next.js (it loads its fonts with next/font) · motion.

pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/synais-footer.json"

Usage

import SynaisFooter from "@/components/blocx/SynaisFooter";

export default function Page() {
  return (
    <SynaisFooter
      onSubscribe={async (email) => {
        await fetch("/api/subscribe", { method: "POST", body: JSON.stringify({ email }) });
      }}
    />
  );
}

API reference

SynaisFooter

Accessibility

• The newsletter field is labelled; its note doubles as a polite live region for errors and the thank-you
• Columns sit in a labelled nav with real headings; social links carry their network's name
• The wordmark is aria-hidden — the logo link already names the brand

Motion

• The brand, newsletter and columns fade in on a stagger; the wordmark rises a letter at a time
• The submit arrow spins while sending and turns into a check

Responsive behavior

• Four columns on desktop, two on a tablet
• Below 720px the newsletter drops under the brand and the fine print stacks