Page Footer

Marketing-style footer with icon nav links and optional attribution.

Saved preference for elorm init --ui-library base-ui
PreviewCode
"use client"

import { BookOpenIcon, GithubIcon } from "lucide-react"
import { PageFooter } from "@/components/blocks/page-footer"

export function PageFooterDemo() {
  return (
    <PageFooter
      links={[
        { label: "Docs", href: "/docs", icon: BookOpenIcon },
        {
          label: "GitHub",
          href: "https://github.com/Akarikev/ui",
          icon: GithubIcon,
          external: true,
        },
      ]}
      attribution={
        <>
          Built with{" "}
          <a
            href="https://ui.elorm.xyz"
            className="text-foreground/80 underline hover:text-foreground"
          >
            elorm/ui
          </a>
          .
        </>
      }
    />
  )
}

Installation#

Usage#

import { PageFooter } from "@/components/blocks/page-footer"

Marketing-style footer with icon nav links and optional attribution.

Pass a links array and optional attribution React node.

Composition#

Page Footer
├── IconNavLink