# Footer Columns

Brand, four link columns, a newsletter field and a bottom bar.

**Kind:** section · Footer  
**Styles:** Dark, Enterprise  
**Built from:** button  
**Live preview:** https://charcoalui.com/preview/section/footer-columns

## Install

```bash
npx shadcn@latest add https://charcoalui.com/r/footer-columns.json
```
Lands in `components/sections/footer-columns.tsx` and installs every component it uses.

## Props (all optional, for your copy)

```ts
export type FooterColumnsProps = {
  brand?: string;
  tagline?: string;
  columns?: { title: string; links: string[] }[];
};
```

## Source

```tsx
"use client";

import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";

export type FooterColumnsProps = {
  brand?: string;
  tagline?: string;
  columns?: { title: string; links: string[] }[];
};

export function FooterColumns({
  brand = "Lumen",
  tagline = "Ship the work that matters.",
  columns = [
    { title: "Product", links: ["Agents", "Autopilot", "Integrations", "Changelog"] },
    { title: "Company", links: ["About", "Careers", "Blog", "Press"] },
    { title: "Resources", links: ["Docs", "API", "Status", "Security"] },
    { title: "Legal", links: ["Privacy", "Terms", "DPA", "Cookies"] },
  ],
}: FooterColumnsProps) {
  return (
    <footer className="border-t bg-background">
      <div className="mx-auto grid grid-cols-1 max-w-6xl gap-12 px-6 py-16 lg:grid-cols-[1.3fr_2fr]">
        <div>
          <p className="flex items-center gap-2 font-semibold tracking-tight">
            <span className="size-5 rounded-md bg-ember" aria-hidden /> {brand}
          </p>
          <p className="mt-3 text-sm text-muted-foreground">{tagline}</p>
          <form onSubmit={(e) => e.preventDefault()} className="mt-6 flex max-w-sm gap-2">
            <label htmlFor="footer-email" className="sr-only">
              Email for product updates
            </label>
            <input
              id="footer-email"
              type="email"
              placeholder="Get product updates"
              className="h-10 min-w-0 flex-1 rounded-lg border border-input bg-background px-3 text-sm outline-none placeholder:text-muted-foreground focus:border-foreground/40 focus:ring-[3px] focus:ring-ring/25"
            />
            <Button type="submit" size="icon" aria-label="Subscribe">
              <ArrowRight />
            </Button>
          </form>
        </div>
        <nav aria-label="Footer" className="grid grid-cols-2 gap-8 sm:grid-cols-4">
          {columns.map((c) => (
            <div key={c.title}>
              <p className="text-sm font-semibold">{c.title}</p>
              <ul className="mt-4 grid gap-2.5">
                {c.links.map((l) => (
                  <li key={l}>
                    <a href="#" className="text-sm text-muted-foreground transition-colors hover:text-foreground">
                      {l}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>
      <div className="border-t">
        <div className="mx-auto flex max-w-6xl flex-col gap-2 px-6 py-6 text-xs text-muted-foreground sm:flex-row sm:justify-between">
          <p>
            © {new Date().getFullYear()} {brand}, Inc. All rights reserved.
          </p>
          <p className="flex items-center gap-2">
            <span className="size-1.5 rounded-full bg-success" /> All systems normal
          </p>
        </div>
      </div>
    </footer>
  );
}
```