# Footer mega (goodtabs UI)

A large footer with a lead column, five or six link columns and an oversized wordmark.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/footer-mega.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/footer-mega`

## Usage

```tsx
import { FooterMega } from "@/components/footer-mega"

<FooterMega
  lead="Interface parts for teams that ship."
  columns={[{ title: "Product", links: [{ label: "Docs", href: "/docs" }] }]}
  wordmark="Northwind"
  legal="2026 Northwind Ltd."
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lead | `string` |  | Short pitch in the lead column. |
| leadSlot | `ReactNode` |  | Under the lead: a signup form, status pill or button. |
| columns | `{ title: string; links: { label: string; href: string }[] }[]` |  | Five or six link columns. |
| wordmark | `string` |  | The oversized word at the bottom. |
| legal | `string` |  | Left of the bottom bar. |
| bottom | `ReactNode` |  | Right of the bottom bar. |

## When to use

- Sites with five or more groups of links
- Marketing pages where the footer is a brand moment

## When not to use

- Small sites with a handful of links; use footer-minimal or footer-columns
- App screens, where a footer should stay out of the way

## Notes for agents

- Server component with plain anchors; swap for next/link if you want client routing
- The wordmark is aria-hidden and sits at foreground 6 percent
- Columns collapse to 2 on a phone, 3 at sm, one row at lg

Docs: https://ui.goodtabs.co/components/footer-mega