caliper uidocs
DemoSign inGet Pro

Site footer

Block

Link columns, social links and legal text.

Installs components/ui/site-footer.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/site-footer.json

When to use #

Use it for

  • The bottom of a public website.

Skip it when

  • Application screens.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/site-footer.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { AtSign, MessageCircle, Rss } from "lucide-react"
import { SiteFooter } from "@/components/ui/site-footer"

function Brand() {
  return (
    <a href="#top" className="flex items-center gap-2 rounded-control text-sm font-semibold tracking-tight no-underline outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
      <span aria-hidden="true" className="grid size-7 place-items-center rounded-surface bg-foreground text-xs text-background">R</span>
      Caliper UI
    </a>
  );
}

export function SiteFooterDemo() {
  return (
    <SiteFooter
              brand={<Brand />}
              description="A library of interface parts that you install, read and change."
              columns={[
                { title: "Product", links: [{ label: "Components", href: "#" }, { label: "Blocks", href: "#" }, { label: "Changelog", href: "#" }] },
                { title: "Resources", links: [{ label: "Docs", href: "#" }, { label: "Guides", href: "#" }, { label: "Status", href: "#" }] },
                { title: "Company", links: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }, { label: "Careers", href: "#" }] },
                { title: "Legal", links: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }, { label: "License", href: "#" }] },
              ]}
              social={[
                { label: "Community chat", href: "#", icon: <MessageCircle aria-hidden="true" /> },
                { label: "Email us", href: "#", icon: <AtSign aria-hidden="true" /> },
                { label: "RSS feed", href: "#", icon: <Rss aria-hidden="true" /> },
              ]}
              legal={<span>© 2026 Caliper UI. All rights reserved.</span>}
            />
  );
}

API reference #

Accessibility #

It is built on native elements and keeps aria-label in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.