Footer Simple

One-row footer: brand, links and a small note.

FootersServer-safe

Install

bash

npx @agents-npm-packages/vibeui add footer-simple --dir ./src/components/ui

Import

tsx

import { FooterSimple } from "@/components/ui/footer-simple"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<FooterSimple>

Prop	Type	Default	Description
brand*	ReactNode	—	Logo or wordmark node.
links*	{ label: string; href: string; }[]	—	Array of { label, href } links.
note	string	—	Small text on the right.
className	string	—	Extra classes, merged with the component's own.

Source

src/components/ui/footer-simple.tsx

import { cn } from "@/lib/utils";

/** One-row footer: brand, links and a small note. */
export function FooterSimple({
  brand,
  links,
  note,
  className,
}: {
  brand: React.ReactNode;
  links: { label: string; href: string }[];
  note?: string;
  className?: string;
}) {
  return (
    <footer className={cn("border-t border-line", className)}>
      <div className="mx-auto flex max-w-5xl flex-col gap-5 px-5 py-8 sm:flex-row sm:items-center sm:justify-between">
        <div className="text-ink">{brand}</div>
        <nav aria-label="Footer" className="flex flex-wrap gap-x-6 gap-y-2">
          {links.map((l) => (
            <a
              key={l.href + l.label}
              href={l.href}
              className="text-[13px] text-muted transition-colors hover:text-ink"
            >
              {l.label}
            </a>
          ))}
        </nav>
        {note ? <p className="text-xs text-faint">{note}</p> : null}
      </div>
    </footer>
  );
}

Exports FooterSimple. Peer dependencies: clsx, tailwind-merge.