# Footer columns (goodtabs UI)

A site footer with a brand line, columns of links, a hairline and a legal bar.

## Install

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

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

## Usage

```tsx
import { FooterColumns } from "@/components/ui/footer-columns"

<FooterColumns
  brand={<Link href="/">Acme</Link>}
  description="Billing for agencies."
  columns={[
    { title: "Product", links: [{ label: "Pricing", href: "/pricing" }] },
    { title: "Company", links: [{ label: "About", href: "/about" }] },
  ]}
  legal="2026 Acme Ltd"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| brand | `ReactNode` |  | Wordmark or logo, usually a link to the home page. |
| description | `string` |  | One line under the brand. |
| columns | `{ title: string; links: { label: string; href: string; external?: boolean }[] }[]` | `[]` | Columns of links with a mono uppercase heading each. Three or four reads best. |
| bottom | `ReactNode` |  | Right side of the bottom bar: small links or social icons. |
| legal | `string` |  | Left side of the bottom bar, usually the copyright line. |

## When to use

- The bottom of a marketing site or docs site with eight or more secondary links
- When legal links and social profiles need a home that is not the header
- Without columns, as a one-line footer for a newsletter or a small app

## When not to use

- Inside an app shell where a sidebar already holds the secondary links
- On a landing page with a single call to action: a one-line footer is enough
- For more than five columns: group the links or move some into docs

## Notes for agents

- Server component. Internal links use next/link; set external to open in a new tab with a small arrow
- The column count follows columns.length from sm up and is two columns below it
- The bottom bar only renders when legal or bottom is set; put small links or social icons in bottom
- It sets no background: place it on bg-background and the hairlines do the rest

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