Columns and Letter Footer

Footer127: Columns and Letter Footer

A columns-and-letter footer: wordmark, tagline and a rounded newsletter row on one side, three link columns on the other, closed by a rule with the copyright and 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/footer127?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/footer127.tsx, the shadcn input primitive the newsletter is built on, and the button22 sliding-marker pill it uses.

Quick start

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

import { Footer127, footer127Demo } from "@/components/beste/block/footer127";

export default function Page() {
  return <Footer127 {...footer127Demo} />;
}

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

import { Footer127 } from "@/components/beste/block/footer127";

export default function Page() {
  return (
    <Footer127
      brand="Altair"
      tagline="Therapy and coaching, at a pace you can keep."
      newsletter={{
        title: "The monthly letter",
        placeholder: "Your email",
        button: "Subscribe",
        note: "One email a month. Unsubscribe in one click.",
      }}
      groups={[
        {
          title: "Sessions",
          links: [
            { label: "Individual therapy", href: "/therapy" },
            { label: "Couples", href: "/couples" },
          ],
        },
      ]}
      legal={[{ label: "Privacy", href: "/privacy" }]}
      copyright="2026 Altair. Registered practice, Lisbon." 
    />
  );
}

Props

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

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

type Newsletter = {
  title: string;
  placeholder: string;
  button: string;
  note: string;
};

Behavior notes

• The newsletter title sits inside the form element as a paragraph rather than as a heading, so a footer full of small labels does not inject a stray heading level into the page outline.
• The field and its button share one row that flips to a column below sm, with shrink-0 on the pill so a long call to action is never truncated.
• The Input is transparent with a border that goes solid on focus and no focus ring, so the row reads as one object rather than as a boxed field with a button next to it.
• legal is kept separate from groups so privacy and terms stay on the closing rule where people look for them, rather than being buried in a column of page links.
• Link groups are a two-column grid on a phone and three across from md, so no column is stranded alone on a row.
• The footer carries a border-t of its own, which is what separates it from the last section when the page above it ends on the same background.
• The form only calls preventDefault(); no address is captured or sent until you wire it up.