Publication Footer With Subscribe Row

Footer123: Publication Footer With Subscribe Row

A footer that gives its left half to a working subscribe row and its right half to three link columns, closed by a colophon line sitting opposite the legal links.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/footer123?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/footer123?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/footer123.tsx, the badge6 component used for the eyebrow, and the shadcn/ui input and button primitives behind the subscribe row.

Quick start

The installed file exports footer123Demo alongside the block: the exact props behind the preview above. Spread it to get a working footer in one line.

import { Footer123, footer123Demo } from "@/components/beste/block/footer123";

export default function Layout() {
  return <Footer123 {...footer123Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Footer123 } from "@/components/beste/block/footer123";

export default function SiteFooter() {
  return (
    <Footer123
      eyebrow="Before you go"
      heading="One letter, every Tuesday"
      placeholder="you@studio.com"
      submitLabel="Subscribe"
      confirmation="You are on the list. See you Tuesday."
      columns={[
        {
          title: "Writing",
          links: [
            { label: "Essays", href: "/essays" },
            { label: "Archive", href: "/archive" },
          ],
        },
      ]}
      colophon="Set in one typeface, published from a folder of text files."
      legal={[{ label: "Privacy", href: "/privacy" }]}
    />
  );
}

Props

type LinkColumn = {
  title: string;
  links: FooterLink[];
};

type FooterLink = {
  label: string;
  href: string;
};

Behavior notes

• The subscribe row is real: submitting swaps it for the confirmation line in place, with no page change and no request. Point the handler at your own list when you wire it up.
• The layout is a 1fr to 1.2fr split from lg up, so the link columns take slightly more room than the pitch. Below that everything stacks with the pitch first.
• Columns are driven by data, so three is a demo choice rather than a fixed grid: the inner grid is sm:grid-cols-3 and takes what you pass.
• The colophon and the legal links share the closing row, opposite each other on desktop and stacked on a phone.
• The block renders a footer element and adds its own border-t, so it can sit directly after page content.