# Footer

> A site footer with link groups in columns, a brand area, social links and a legal line. Each link group is a separately named navigation landmark.

Facade UI item `footer` (block, section).
Docs page: https://facadeui.dev/components/footer · Registry JSON: https://facadeui.dev/r/footer.json

## Install

```bash
npx shadcn@latest add @facade/footer
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/footer.json`. The CLI also installs what it needs: @facade/container, @facade/heading, @facade/types, @facade/utils.

Files: `components/sections/footer.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/footer-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Footer } from "@/components/sections/footer"

import { FOOTER_GROUPS } from "./content"

export function Demo() {
  return (
    <Footer
      brand={
        <div className="flex flex-col gap-2">
          <span className="text-base font-semibold tracking-tight">Facade UI</span>
          <p className="text-muted-foreground text-pretty text-sm">
            The front of every great website.
          </p>
        </div>
      }
      groups={FOOTER_GROUPS}
      copyright="© 2026 Facade UI contributors"
      legal={[
        { label: "Privacy", href: "#privacy" },
        { label: "Terms", href: "#terms" },
      ]}
      headingLevel={2}
    />
  )
}
```

## Props

### FooterProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `groups` | `FooterGroup[]` | `[]` |  |
| `brand` | `ReactNode` |  | Wordmark, logo, or a short pitch. |
| `children` | `ReactNode` |  | Shown under the brand, such as a newsletter form or a status badge. |
| `social` | `FooterSocial[]` | `[]` |  |
| `copyright` | `ReactNode` |  | The full line, e.g. `© 2026 Acme, Inc.` Rendered as given. |
| `legal` | `FooterLink[]` | `[]` | Links such as privacy and terms. Shown in a row at the bottom. |
| `link` | `LinkComponent` |  |  |
| `headingLevel` | `HeadingLevel` | `2` | Heading level of the column headings. Defaults to `2`. |
| `className` | `string` |  |  |
| `id` | `string` |  |  |