Minimal footer

One row: copyright on the left, a short link set on the right, stacking and centring on phones. What a small product or a docs site actually needs instead of a four-column wall.

Navigationfooterminimalsingle-row

Preview

apps/site/blocks/components/FooterMinimal.tsx

export function FooterMinimal({
  brand = 'Acme',
  links = [
    { label: 'Privacy', href: '#' },
    { label: 'Terms', href: '#' },
    { label: 'Contact', href: '#' },
  ],
}: {
  brand?: string;
  links?: { label: string; href: string }[];
}) {
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-border/60 bg-background">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-4 px-4 py-6 text-sm text-muted-foreground sm:flex-row sm:justify-between sm:px-6">
        <div>
          © {year} {brand}
        </div>
        <nav aria-label="Footer" className="flex items-center gap-5">
          {links.map((link) => (
            <a key={link.label} href={link.href} className="transition-colors hover:text-foreground">
              {link.label}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
}

Dependencies

None. This block is self-contained — plain React and Tailwind utility classes. Paste the file and it renders.

Colours come from CSS variables (--background, --primary, --border) using the shadcn/ui token names, so the block adopts your palette rather than importing ours.