# Footer Section v4

> Spacious footer with the uiception logo lockup, three link columns, a noise texture overlay, and bottom-left copyright and office lines.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/footer-section-v4
- Screenshot: https://shadcn.exchange/shot/uiception/footer-section-v4/light.png
- Registry item: https://uiception.com/r/footer-section-v4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/footer-section-v4.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: `https://uiception.com/r/block-media.json`

## Files

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

```tsx
import FooterSectionV4 from "./components/footer-section-v4"

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

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

```tsx
import Image from "next/image"
import Link from "next/link"

import { createBlockImage } from "@/lib/block-media"

import { footerColumns, footerMeta } from "../lib/footer-content"

const blockImage = createBlockImage("footer-section-v4")
const LOGO_SRC = blockImage("logo.svg")

export default function FooterSectionV4() {
  return (
    <section className="relative overflow-hidden bg-background py-4 md:py-6 lg:py-8">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.05] dark:opacity-[0.08]"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
          backgroundSize: "128px 128px",
        }}
      />

      <div className="relative mx-auto flex max-w-7xl flex-col justify-between gap-10 px-4 md:gap-12">
        <div className="flex flex-col gap-10 sm:flex-row sm:justify-between">
          <Link
            href="#"
            className="inline-flex w-fit items-center gap-2 font-medium tracking-tight text-foreground"
          >
            <Image
              alt="Logo"
              src={LOGO_SRC}
              width={32}
              height={32}
              className="size-8 shrink-0"
              unoptimized
            />
            <span className="text-lg tracking-tight">{footerMeta.name}</span>
          </Link>

          <div className="grid grid-cols-2 gap-x-10 gap-y-8 sm:grid-cols-3 sm:gap-x-16">
            {footerColumns.map((column) => (
              <div key={column.title} className="space-y-4">
                <h3 className="text-sm text-muted-foreground/70">
                  {column.title}
                </h3>
                <ul className="space-y-3">
                  {column.links.map((link) => (
                    <li key={link.label}>
                      <Link
                        href={link.href}
                        className="text-sm font-medium text-foreground transition-colors hover:text-muted-foreground"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-1 text-xs text-muted-foreground">
          <p>{footerMeta.copyright}</p>
          <p>{footerMeta.offices}</p>
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/footer-section-v4/lib/footer-content.ts`

```ts
export type FooterLink = {
  label: string
  href: string
}

export type FooterColumn = {
  title: string
  links: FooterLink[]
}

export const footerColumns: FooterColumn[] = [
  {
    title: "Product",
    links: [
      { label: "Live monitoring", href: "#" },
      { label: "Incident response", href: "#" },
      { label: "Postmortems", href: "#" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Blog", href: "#" },
      { label: "Video library", href: "#" },
      { label: "LinkedIn", href: "#" },
    ],
  },
  {
    title: "About",
    links: [
      { label: "Careers", href: "#" },
      { label: "Contact", href: "#" },
    ],
  },
]

export const footerMeta = {
  name: "uiception",
  copyright: "Copyright © 2026 uiception. All rights reserved.",
  offices: "Offices in LA, NY, and Texas.",
}
```

### `public/images/blocks/footer-section-v4/logo.svg.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```