# Footer-3

> Footer for organizations that place typography at the bottom

A shadcn/ui block from the [@hexui](https://hexui.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hexui/footer-3).

- Page, with a live preview: https://shadcn.exchange/r/hexui/footer-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hexui/footer-3-light-c793f27a5479f2cf.png
- Registry item: https://hexui.sh/r/footer-3.json
- Categories: footer
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hexui.sh/r/footer-3.json
```

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

## Dependencies

- npm packages: `lucide-react`

## Files

### `registry/blocks/footer/footer-3/source/app/footer/page.tsx`

```tsx
import { SiteFooter } from "../../components/site-footer"

export default function Page() {
    return (
        <div className="flex flex-col w-full min-h-dvh items-center justify-center">
            <SiteFooter />
        </div>
    )
}
```

### `registry/blocks/footer/footer-3/source/components/site-footer.tsx`

```tsx
import Link from "next/link"
import { Command } from "lucide-react"
import { NavLinks } from "./nav-links"
import Typographic from "./typographic-approach"

const footerSections = [
    {
        title: "Product",
        links: [
            { label: "Features", href: "#" },
            { label: "Pricing", href: "#" },
            { label: "Case Studies", href: "#" },
            { label: "Changelog", href: "#" },
        ],
    },
    {
        title: "Company",
        links: [
            { label: "About Us", href: "#" },
            { label: "Careers", href: "#" },
            { label: "Blog", href: "#" },
            { label: "Contact", href: "#" },
        ],
    },
    {
        title: "Resources",
        links: [
            { label: "Documentation", href: "#" },
            { label: "API Reference", href: "#" },
            { label: "Guides", href: "#" },
            { label: "Support", href: "#" },
        ],
    },
    {
        title: "Legal",
        links: [
            { label: "Terms of Service", href: "#" },
            { label: "Privacy Policy", href: "#" },
            { label: "Cookie Settings", href: "#" },
        ],
    },
]

export function SiteFooter() {
    return (
        <footer className="w-full border-t border-border">
            <div className="flex flex-col gap-6 mx-auto max-w-7xl px-6 pt-8 xl:pt-12 md:px-8">
                <div className="w-full flex items-start justify-between gap-8 sm:gap-12">
                    <NavLinks sections={footerSections} />

                    <Link href="#" aria-label="Acme Inc. home" className="flex items-center gap-2">
                        <Command />
                    </Link>
                </div>

                <div className="w-full h-full text-black/90 dark:text-white/90">
                    <Typographic />
                </div>
            </div>
        </footer>
    )
}
```

### `registry/blocks/footer/footer-3/source/components/nav-links.tsx`

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

type FooterLinkItem = {
  label: string
  href: string
}

type FooterSection = {
  title: string
  links: FooterLinkItem[]
}

type NavLinksProps = {
  sections: FooterSection[]
}

export function NavLinks({ sections }: NavLinksProps) {
  return (
    <div className="grid gap-6 sm:gap-8 grid-cols-2 md:w-2/3 md:flex-1 md:grid-cols-4">
      {sections.map((section) => (
        <div key={section.title}>
          <h3 className="text-sm font-semibold text-foreground">{section.title}</h3>
          {/* role="list" keeps list semantics; Tailwind preflight strips default list styles. */}
          <ul role="list" className="mt-4 space-y-2 sm:space-y-3">
            {section.links.map((item) => (
              <li key={item.label}>
                <Link
                  href={item.href}
                  className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}
```

### `registry/blocks/footer/footer-3/source/components/typographic-approach.tsx`

```tsx
export default function Typographic() {
    return (
        // Decorative SVG wordmark; `fill="currentColor"` makes it follow the foreground/theme color.
        <svg className="block w-full h-auto drop-shadow-[0_-4px_10px_rgba(0,0,0,0.2)]" viewBox="0 0 1000 124" xmlns="http://www.w3.org/2000/svg"><mask id="satori_om-id"><rect x="0" y="0" width="1000" height="124" fill="#fff" /></mask><mask id="satori_om-id-0"><rect x="0" y="-25" width="1000" height="194" fill="#fff"/></mask><g  ><path fill="currentColor" d="M59.4 40.2L30.2 130L3.8 130L44.0 13.6L75.7 13.6L115.8 130L89.4 130L60.3 40.2L59.4 40.2ZM28.5 103.5L28.5 84.3L90.8 84.3L90.8 103.5L28.5 103.5ZM164.7 131.7L164.7 131.7Q151.3 131.7 141.6 126.0Q132.0 120.3 126.8 110.1Q121.7 99.9 121.7 86.7L121.7 86.7Q121.7 73.3 126.9 63.2Q132.1 53.0 141.7 47.3Q151.3 41.6 164.5 41.6L164.5 41.6Q176.0 41.6 184.5 45.7Q193.1 49.9 198.1 57.4Q203.1 64.9 203.6 75L203.6 75L180.8 75Q179.8 68.5 175.7 64.5Q171.6 60.5 164.9 60.5L164.9 60.5Q159.3 60.5 155.1 63.5Q151.0 66.5 148.6 72.3Q146.3 78.1 146.3 86.4L146.3 86.4Q146.3 94.7 148.6 100.6Q150.9 106.4 155.1 109.5Q159.3 112.6 164.9 112.6L164.9 112.6Q169.1 112.6 172.4 110.9Q175.7 109.1 177.9 105.9Q180.1 102.6 180.8 98.0L180.8 98.0L203.6 98.0Q203.1 108.0 198.2 115.6Q193.4 123.2 184.8 127.4Q176.3 131.7 164.7 131.7ZM243.4 130L219.2 130L219.2 42.7L242.3 42.7L242.3 58.1L243.3 58.1Q246.0 50.5 252.4 46.0Q258.8 41.6 267.6 41.6L267.6 41.6Q276.6 41.6 282.9 46.1Q289.2 50.5 291.3 58.1L291.3 58.1L292.2 58.1Q294.9 50.6 301.9 46.1Q308.9 41.6 318.5 41.6L318.5 41.6Q330.7 41.6 338.4 49.3Q346.0 57.1 346.0 71.3L346.0 71.3L346.0 130L321.9 130L321.9 76.1Q321.9 68.8 318.0 65.2Q314.1 61.5 308.4 61.5L308.4 61.5Q301.8 61.5 298.1 65.7Q294.4 69.9 294.4 76.7L294.4 76.7L294.4 130L270.9 130L270.9 75.6Q270.9 69.1 267.2 65.3Q263.6 61.5 257.6 61.5L257.6 61.5Q253.6 61.5 250.4 63.6Q247.2 65.6 245.3 69.2Q243.4 72.8 243.4 77.6L243.4 77.6L243.4 130ZM404.9 131.7L404.9 131.7Q391.4 131.7 381.7 126.2Q372.0 120.7 366.8 110.7Q361.6 100.6 361.6 86.8L361.6 86.8Q361.6 73.3 366.8 63.1Q372.0 53.0 381.6 47.3Q391.1 41.6 403.9 41.6L403.9 41.6Q412.6 41.6 420.0 44.3Q427.5 47.1 433.1 52.6Q438.7 58.1 441.8 66.4Q444.9 74.8 444.9 85.9L444.9 85.9L444.9 92.6L371.3 92.6L371.3 77.6L422.2 77.6Q422.2 72.3 419.9 68.3Q417.6 64.3 413.6 62.0Q409.6 59.7 404.3 59.7L404.3 59.7Q398.8 59.7 394.6 62.2Q390.3 64.7 388.0 68.9Q385.6 73.2 385.5 78.4L385.5 78.4L385.5 92.6Q385.5 99.1 387.9 103.8Q390.3 108.5 394.8 111.1Q399.2 113.6 405.3 113.6L405.3 113.6Q409.3 113.6 412.7 112.5Q416.0 111.4 418.4 109.1Q420.8 106.8 422.0 103.5L422.0 103.5L444.4 105Q442.7 113.1 437.5 119.1Q432.2 125.1 423.9 128.4Q415.7 131.7 404.9 131.7Z M589.1 47.1L565.5 47.1Q564.8 40.2 559.7 36.4Q554.5 32.6 545.6 32.6L545.6 32.6Q539.6 32.6 535.5 34.3Q531.3 36.0 529.1 38.9Q526.9 41.9 526.9 45.6L526.9 45.6Q526.8 48.7 528.3 51.1Q529.7 53.4 532.3 55.1Q534.8 56.8 538.2 58.0Q541.5 59.2 545.3 60.1L545.3 60.1L555.8 62.6Q563.4 64.3 569.8 67.1Q576.1 69.9 580.8 74.1Q585.5 78.2 588.0 83.9Q590.6 89.5 590.7 96.8L590.7 96.8Q590.6 107.4 585.3 115.3Q579.9 123.1 569.8 127.4Q559.7 131.6 545.5 131.6L545.5 131.6Q531.4 131.6 521.0 127.3Q510.6 123.0 504.7 114.5Q498.9 106.0 498.6 93.5L498.6 93.5L522.4 93.5Q522.8 99.3 525.8 103.2Q528.8 107.1 533.8 109.1Q538.9 111.0 545.2 111.0L545.2 111.0Q551.5 111.0 556.1 109.2Q560.7 107.4 563.3 104.1Q565.9 100.9 565.9 96.7L565.9 96.7Q565.9 92.8 563.6 90.1Q561.3 87.4 556.8 85.6Q552.4 83.7 546.1 82.2L546.1 82.2L533.4 79.0Q518.7 75.4 510.2 67.8Q501.6 60.2 501.7 47.3L501.7 47.3Q501.6 36.7 507.4 28.8Q513.1 20.9 523.1 16.5Q533.1 12.0 545.8 12.0L545.8 12.0Q558.8 12.0 568.4 16.5Q578.1 20.9 583.5 28.8Q588.9 36.7 589.1 47.1L589.1 47.1ZM600.6 42.7L653.1 42.7L653.1 60.9L600.6 60.9L600.6 42.7ZM612.5 106.4L612.5 21.8L636.7 21.8L636.7 103.2Q636.7 106.5 637.7 108.4Q638.8 110.2 640.6 111.0Q642.4 111.7 644.9 111.7L644.9 111.7Q646.6 111.7 648.3 111.4Q650.0 111.1 650.9 110.9L650.9 110.9L654.7 128.9Q652.9 129.5 649.6 130.3Q646.3 131.0 641.6 131.2L641.6 131.2Q632.8 131.5 626.3 128.9Q619.7 126.2 616.1 120.6Q612.4 114.9 612.5 106.4L612.5 106.4ZM724.8 92.8L724.8 92.8L724.8 42.7L749.0 42.7L749.0 130L725.8 130L725.8 114.1L724.9 114.1Q721.9 121.8 715.1 126.5Q708.2 131.1 698.4 131.1L698.4 131.1Q689.7 131.1 683.0 127.2Q676.4 123.2 672.6 115.9Q668.9 108.5 668.9 98.3L668.9 98.3L668.9 42.7L693.1 42.7L693.1 94.0Q693.1 101.7 697.2 106.2Q701.3 110.7 708.2 110.7L708.2 110.7Q712.6 110.7 716.4 108.7Q720.2 106.6 722.5 102.7Q724.9 98.7 724.8 92.8ZM800.5 131.4L800.5 131.4Q790.6 131.4 782.5 126.3Q774.5 121.1 769.8 111.1Q765.1 101.1 765.1 86.5L765.1 86.5Q765.1 71.5 769.9 61.5Q774.8 51.5 782.8 46.6Q790.9 41.6 800.5 41.6L800.5 41.6Q807.8 41.6 812.7 44.1Q817.6 46.5 820.7 50.2Q823.7 53.9 825.3 57.4L825.3 57.4L826.0 57.4L826.0 13.6L850.2 13.6L850.2 130L826.3 130L826.3 116.0L825.3 116.0Q823.6 119.7 820.5 123.2Q817.4 126.8 812.5 129.1Q807.6 131.4 800.5 131.4ZM808.2 112.2L808.2 112.2Q814.0 112.2 818.1 108.9Q822.2 105.7 824.3 99.9Q826.5 94.1 826.5 86.4L826.5 86.4Q826.5 78.6 824.4 72.8Q822.2 67.1 818.1 64.0Q814.0 60.9 808.2 60.9L808.2 60.9Q802.2 60.9 798.1 64.1Q794.0 67.3 791.9 73.1Q789.8 78.8 789.8 86.4L789.8 86.4Q789.8 94.0 792.0 99.8Q794.1 105.6 798.2 108.9Q802.2 112.2 808.2 112.2ZM894.2 130L870.0 130L870.0 42.7L894.2 42.7L894.2 130ZM882.2 31.5L882.2 31.5Q876.8 31.5 872.9 27.9Q869.1 24.3 869.1 19.2L869.1 19.2Q869.1 14.2 872.9 10.6Q876.8 7.0 882.2 7.0L882.2 7.0Q887.6 7.0 891.4 10.6Q895.2 14.2 895.2 19.2L895.2 19.2Q895.2 24.3 891.4 27.9Q887.6 31.5 882.2 31.5ZM953.0 131.7L953.0 131.7Q939.7 131.7 930.1 126.1Q920.5 120.4 915.2 110.3Q910.0 100.1 910.0 86.7L910.0 86.7Q910.0 73.2 915.2 63.0Q920.5 52.9 930.1 47.2Q939.7 41.6 953.0 41.6L953.0 41.6Q966.2 41.6 975.8 47.2Q985.5 52.9 990.7 63.0Q995.9 73.2 995.9 86.7L995.9 86.7Q995.9 100.1 990.7 110.3Q985.5 120.4 975.8 126.1Q966.2 131.7 953.0 131.7ZM953.1 113.0L953.1 113.0Q959.1 113.0 963.1 109.5Q967.2 106.1 969.2 100.1Q971.3 94.1 971.3 86.5L971.3 86.5Q971.3 78.9 969.2 73.0Q967.2 67.0 963.1 63.5Q959.1 60.1 953.1 60.1L953.1 60.1Q947.0 60.1 942.9 63.5Q938.8 67.0 936.7 73.0Q934.6 78.9 934.6 86.5L934.6 86.5Q934.6 94.1 936.7 100.1Q938.8 106.1 942.9 109.5Q947.0 113.0 953.1 113.0Z "/></g></svg>
    )
}
```