Footer Stacked

A centered footer with stacked brand details and navigation.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/footer-stacked.json

Usage

tsx

import { FooterStacked } from "@/components/hangry-ui/blocks/footer-stacked";

<FooterStacked
  brand="Acme"
  description="Tools for your next idea."
  copyright="© 2026 Acme"
  githubHref="#github"
  groups={[
    { title: "Pages", links: [
      { label: "Home", href: "#home" },
      { label: "Components", href: "#components" },
      { label: "Blocks", href: "#blocks" },
    ] },
    { title: "More", links: [
      { label: "Shaders", href: "#shaders" },
      { label: "Sponsor", href: "#sponsor" },
      { label: "Privacy", href: "#privacy" },
    ] },
  ]}
  callout={{
    title: "Build something new",
    description: "Explore the component collection.",
    label: "Get started",
    href: "#components",
  }}
/>

Sample navigation

The default page labels match the main footer: Home, Components, Blocks, Shaders, Sponsor, and Privacy. Fragment URLs keep the demo on the current page. Replace them with your own routes when using the block.