# Footer Section v5

> Airy footer with the greyscale uiception logo, a single company link column, LinkedIn and X icons, and a bottom bar for copyright and legal links.

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-v5).

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/footer-section-v5.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-v5/page.tsx`

```tsx
import FooterSectionV5 from "./components/footer-section-v5"

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

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

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

import { LinkedinIcon } from "@/components/ui/svgs/linkedinIcon"
import { LinkedinIconDark } from "@/components/ui/svgs/linkedinIconDark"
import { X } from "@/components/ui/svgs/x"
import { XDark } from "@/components/ui/svgs/xDark"
import { createBlockImage } from "@/lib/block-media"

import {
  footerColumn,
  footerLegal,
  footerMeta,
  footerSocial,
  type FooterSocialLink,
} from "../lib/footer-content"

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

function SocialIcons({
  icon,
}: {
  icon: FooterSocialLink["icon"]
}) {
  switch (icon) {
    case "linkedin":
      return (
        <>
          <LinkedinIcon className="size-4 dark:hidden" />
          <LinkedinIconDark className="hidden size-4 dark:block" />
        </>
      )
    case "x":
      return (
        <>
          <X className="size-4 dark:hidden" />
          <XDark className="hidden size-4 dark:block" />
        </>
      )
    default: {
      const exhaustive: never = icon
      return exhaustive
    }
  }
}

export default function FooterSectionV5() {
  return (
    <footer className="bg-background text-foreground">
      <div className="mx-auto flex min-h-128 w-full max-w-7xl flex-col justify-between gap-20 px-6 py-14 sm:px-8 md:min-h-152 md:py-16 lg:px-10 lg:py-20">
        <div className="flex flex-col gap-12 sm:flex-row sm:items-start sm:justify-between">
          <Link
            href="#"
            className="inline-flex w-fit items-center gap-2.5 text-foreground"
          >
            <Image
              alt="Logo"
              src={LOGO_SRC}
              width={32}
              height={32}
              className="size-6 shrink-0 grayscale"
              unoptimized
            />
            <span className="text-[1.0625rem] font-medium tracking-[-0.02em]">
              {footerMeta.name}
            </span>
          </Link>

          <div className="flex flex-col items-start">
            <p className="text-xs text-muted-foreground">{footerColumn.title}</p>
            <ul className="mt-3 flex flex-col gap-2.5">
              {footerColumn.links.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-[0.9375rem] leading-snug text-foreground transition-colors hover:text-muted-foreground"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
            <ul className="mt-6 flex items-center gap-3.5">
              {footerSocial.map((item) => (
                <li key={item.icon}>
                  <Link
                    href={item.href}
                    aria-label={item.label}
                    className="text-foreground transition-colors hover:text-muted-foreground"
                  >
                    <SocialIcons icon={item.icon} />
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="flex flex-col gap-4 text-[0.8125rem] text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
          <p>{footerMeta.copyright}</p>
          <ul className="flex items-center gap-8">
            {footerLegal.map((link) => (
              <li key={link.label}>
                <Link
                  href={link.href}
                  className="transition-colors hover:text-foreground"
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  )
}
```

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

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

export type FooterSocialLink = {
  label: string
  href: string
  icon: "linkedin" | "x"
}

export const footerColumn = {
  title: "Company",
  links: [
    { label: "About us", href: "#" },
    { label: "Careers", href: "#" },
    { label: "Contact", href: "#" },
  ] satisfies FooterLink[],
}

export const footerSocial: FooterSocialLink[] = [
  { label: "LinkedIn", href: "#", icon: "linkedin" },
  { label: "X", href: "#", icon: "x" },
]

export const footerLegal: FooterLink[] = [
  { label: "Terms of Use", href: "#" },
  { label: "Privacy Policy", href: "#" },
]

export const footerMeta = {
  name: "uiception",
  copyright: "© 2026 uiception. All rights reserved",
}
```

### `components/ui/svgs/linkedinIcon.tsx`

```tsx
import type { SVGProps } from "react";

const LinkedinIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 24 24">
    <path
      fill="#000"
      d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zM7.119 20.452H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
    />
  </svg>
);

export { LinkedinIcon };
```

### `components/ui/svgs/linkedinIconDark.tsx`

```tsx
import type { SVGProps } from "react";

const LinkedinIconDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 24 24">
    <path
      fill="#fff"
      d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zM7.119 20.452H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
    />
  </svg>
);

export { LinkedinIconDark };
```

### `components/ui/svgs/x.tsx`

```tsx
import type { SVGProps } from "react";

const X = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1200 1227">
    <path
      fill="#000"
      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
    />
  </svg>
);

export { X };
```

### `components/ui/svgs/xDark.tsx`

```tsx
import type { SVGProps } from "react";

const XDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1200 1227">
    <path
      fill="#fff"
      d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
    />
  </svg>
);

export { XDark };
```

### `public/images/blocks/footer-section-v5/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.
```