Centred Footer

Footer126: Centred Footer

A centred footer with almost nothing in it: a serif wordmark, one closing line, a pill, a single wrapped row of small-caps links, and a rule carrying the copyright and socials.

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/footer126?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/footer126.tsx plus the button22 sliding-marker pill it uses.

Quick start

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

import { Footer126, footer126Demo } from "@/components/beste/block/footer126";

export default function Page() {
  return <Footer126 {...footer126Demo} />;
}

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

import { Footer126 } from "@/components/beste/block/footer126";

export default function Page() {
  return (
    <Footer126
      brand="Altair"
      statement="Nobody has ever come too early."
      button={{ label: "Have a first conversation", href: "/call", tone: "dark" }}
      links={[
        { label: "Therapy", href: "/therapy" },
        { label: "Coaching", href: "/coaching" },
        { label: "Contact", href: "mailto:[email protected]" },
      ]}
      socials={[{ label: "Instagram", href: "https://instagram.com" }]}
      copyright="2026 Altair, Lisbon" 
    />
  );
}

Props

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

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Links are one flat array rather than titled groups, which is what keeps this footer to a single row; it is the block for a site with six pages, not for a sitemap.
• That row wraps with separate row and column gaps, so a longer list breaks into tidy lines on a phone rather than one cramped row.
• The statement is capped at max-w-md with text-balance, so a short line breaks evenly instead of leaving one word alone on the second line.
• The closing rule stacks on a phone and splits to justify-between from md, so the copyright and socials never crowd each other.
• The wordmark is a p, not a heading: a footer brand is not a section title and should not appear in the page outline.
• Nothing here loads or listens to scroll, so it costs nothing at the foot of an already heavy page.
• Every part is optional, so this collapses cleanly to just a wordmark and a copyright line.