Skip to content

Footer

SM, under 950B gzipped

A simple site footer with locale-aware link list.

Category
Navigation
Budget
sm, single-purpose control
Runtime deps
None

Preview

Preview language

This is the exact fixture the conformance suite renders in CI. Switch the language to see the component mirror and reformat.

Install

npx shadcn@latest add https://kata-ui-rho.vercel.app/r/footer.json

Copies the source into your project. Pulls in 1 primitive: cn.

Source

import { cn } from "../lib/cn";

export interface FooterLink {
  label: string;
  href: string;
}

export interface FooterProps {
  links: FooterLink[];
  copyright: string;
  className?: string;
}

export function Footer({ links, copyright, className }: FooterProps) {
  return (
    <footer className={cn("border-t border-neutral-200 dark:border-neutral-800", className)}>
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-3 px-5 py-6 text-sm text-neutral-600 sm:flex-row sm:justify-between dark:text-neutral-400">
        <p>{copyright}</p>
        <ul className="flex gap-4">
          {links.map((link) => (
            <li key={link.href}>
              <a href={link.href} className="hover:text-neutral-900 dark:hover:text-neutral-100">
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </footer>
  );
}

What CI checks

← All components