Components / Website

Footer

Site-wide footer inspired by Mode's footer, adapted to Instant Strata brand tokens. A full-bleed forest band with a brand column (logo, tagline, social links) beside a grid of link columns, closed by a bottom bar carrying copyright and legal links. Pass structured props for the common case, or compose the exported parts for bespoke layouts.

Default

Brand column on the left, four link columns on the right, and a bottom bar with copyright and legal links.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/footer/registry.json

Usage

tsx

import { Footer, LinkedInIcon, XIcon } from "@/components/ui/footer"

export function SiteFooter() {
  return (
    <Footer
      description="Strata management, simplified. One platform for managers, committees, and owners."
      social={[
        { label: "LinkedIn", href: "https://linkedin.com", icon: <LinkedInIcon /> },
        { label: "X", href: "https://x.com", icon: <XIcon /> },
      ]}
      columns={[
        {
          heading: "Platform",
          links: [
            { label: "Explore platform", href: "/platform" },
            { label: "Owner portal", href: "/owner-portal" },
            { label: "Committee tools", href: "/committee" },
            { label: "Levy & billing", href: "/billing" },
          ],
        },
        {
          heading: "Company",
          links: [
            { label: "About", href: "/about" },
            { label: "Customers", href: "/customers" },
            { label: "Careers", href: "/careers" },
            { label: "Contact us", href: "/contact" },
          ],
        },
      ]}
      legal={[
        { label: "Terms of service", href: "/terms" },
        { label: "Privacy statement", href: "/privacy" },
      ]}
      copyright="© Instant Strata Pty Ltd 2026"
    />
  )
}

Composing the parts

tsx

import { FooterColumn, FooterBottomBar } from "@/components/ui/footer"

// Drop the parts into a bespoke layout when the structured
// Footer props are not flexible enough.
<footer className="bg-forest text-white">
  <div className="mx-auto max-w-[1200px] px-6 py-16">
    <FooterColumn
      heading="Platform"
      links={[
        { label: "Owner portal", href: "/owner-portal" },
        { label: "Committee tools", href: "/committee" },
      ]}
    />
    <FooterBottomBar
      copyright="© Instant Strata Pty Ltd 2026"
      legal={[{ label: "Privacy statement", href: "/privacy" }]}
    />
  </div>
</footer>

Footer props

Prop	Type	Default	Description
description	string	-	Short tagline beneath the logo in the brand column.
columns	FooterColumnData[]	-	Link columns rendered in the grid beside the brand column. Each has a heading and links.
social	FooterSocial[]	-	Social links shown as circular icon buttons under the tagline. Each has a label, href and icon node.
legal	FooterLink[]	-	Legal links (Terms, Privacy, …) rendered on the right of the bottom bar.
copyright	string	-	Copyright line on the left of the bottom bar.
className	string	-	Additional classes on the outer footer element.

FooterColumn props

Prop	Type	Default	Description
heading	string	-	Column title, rendered in lime small caps.
links	FooterLink[]	-	Array of { label, href } links in the column.
className	string	-	Additional classes on the column wrapper.

FooterSocialLink props

Prop	Type	Default	Description
label	string	-	Accessible label for the icon link (used as aria-label).
href	string	-	Profile destination.
children	ReactNode	-	Icon node, typically a lucide icon at size-4.
className	string	-	Additional classes on the anchor.

FooterBottomBar props

Prop	Type	Default	Description
copyright	string	-	Copyright line on the left.
legal	FooterLink[]	-	Legal links on the right.
className	string	-	Additional classes on the bar wrapper.