App navigation

Footer Section

A multi-column site footer with brand tagline, link columns, social links, legal links, and a copyright line. Responsive grid that stacks on mobile.

import { FooterSection } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add footer-section

Import

import.tsx

import { FooterSection } from "@aetherstack/blocks"

Usage

footer-section.tsx

import { FooterSection } from "@aetherstack/blocks"

export default function SiteFooter() {
  return (
    <FooterSection
      brand="Acme"
      tagline="Build beautiful products faster."
      columns={[
        {
          title: "Product",
          links: [
            { label: "Features", href: "#features" },
            { label: "Pricing", href: "#pricing" },
          ],
        },
        {
          title: "Company",
          links: [
            { label: "About", href: "/about" },
            { label: "Blog", href: "/blog" },
          ],
        },
      ]}
      socialLinks={[
        { platform: "GitHub", href: "https://github.com" },
        { platform: "Twitter", href: "https://twitter.com" },
      ]}
      legalLinks={[
        { label: "Privacy", href: "/privacy" },
        { label: "Terms", href: "/terms" },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
brand	string	—	Brand name displayed in the first column.
tagline	string	—	Short tagline below the brand name.
columns	{ title: string; links: { label: string; href: string }[] }[]	—	Link columns rendered after the brand column.
socialLinks	{ platform: string; href: string; icon?: ReactNode }[]	—	Social links in the brand column.
legalLinks	{ label: string; href: string }[]	—	Legal links in the bottom bar.
copyright	string	—	Copyright text. Defaults to '© {year} {brand}. All rights reserved.'.
className	string	—	Additional classes on the footer element.

* Required

Accessibility

→Social links include aria-label set to the platform name for screen readers.
→The footer uses the semantic <footer> element.