# Footer Section v2

> Card-wrapped footer with five link columns: Product, Resources, Company, Legal, and Connect.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/footer-section-v2).

- Page, with a live preview: https://shadcn.exchange/r/uiception/footer-section-v2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/footer-section-v2-light-f7d5db09bb9e8359.png
- Registry item: https://uiception.com/r/footer-section-v2.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/footer-section-v2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`

## Files

### `registry/new-york/blocks/footer-section-v2/page.tsx`

```tsx
import FooterSectionV2 from "./components/footer-section-v2"

export default function Page() {
  return <FooterSectionV2 />
}
```

### `registry/new-york/blocks/footer-section-v2/components/footer-section-v2.tsx`

```tsx
import { ArrowUpRight } from "lucide-react"
import Link from "next/link"

import { Card, CardHeader } from "@/components/ui/card"

type FooterLink = {
  label: string
  href: string
  externalArrow?: boolean
}

const footerColumns: { title: string; links: FooterLink[] }[] = [
  {
    title: "Product",
    links: [
      { label: "Agents", href: "#", externalArrow: true },
      { label: "Enterprise", href: "#", externalArrow: true },
      { label: "Pricing", href: "#" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Download", href: "#", externalArrow: true },
      { label: "Changelog", href: "#" },
      { label: "Docs", href: "#", externalArrow: true },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "Careers", href: "#", externalArrow: true },
      { label: "Blog", href: "#", externalArrow: true },
      { label: "Community", href: "#" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Terms of Service", href: "#", externalArrow: true },
      { label: "Privacy Policy", href: "#", externalArrow: true },
      { label: "Data Use", href: "#" },
    ],
  },
  {
    title: "Connect",
    links: [
      { label: "X", href: "#" },
      { label: "LinkedIn", href: "#" },
      { label: "YouTube", href: "#" },
    ],
  },
]

const copyrightYear = new Date().getFullYear()

export default function FooterSectionV2() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-7xl px-4">
        <Card className="rounded-none">
          <CardHeader className="block px-6 py-7 md:px-8 md:py-8">
            <div className="grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-5">
              {footerColumns.map((column) => (
                <div key={column.title} className="space-y-3">
                  <h2 className="text-sm font-medium text-muted-foreground">
                    {column.title}
                  </h2>
                  <ul className="space-y-2.5">
                    {column.links.map((link) => (
                      <li key={`${column.title}-${link.label}`}>
                        <Link
                          href={link.href}
                          className="group inline-flex items-center gap-0.5 text-sm text-card-foreground no-underline transition-colors hover:text-card-foreground/80"
                        >
                          <span>{link.label}</span>
                          {link.externalArrow ? (
                            <ArrowUpRight
                              aria-hidden
                              className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-[opacity,transform] duration-200 ease-out group-hover:translate-x-px group-hover:-translate-y-px group-hover:opacity-100 motion-reduce:transition-none"
                            />
                          ) : null}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </CardHeader>
          <div className="border-border px-6 py-5 md:px-8 md:py-6">
            <div className="text-sm text-muted-foreground">
              © {copyrightYear}{" "}
              <Link
                href="#"
                className="font-medium text-card-foreground no-underline transition-colors hover:text-card-foreground/70"
              >
                uiception
              </Link>
            </div>
          </div>
        </Card>
      </div>
    </section>
  )
}
```