Component

Footer

Build responsive site footers with brand copy, link columns, subscribe actions, and meta rows.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Footer } from "@chitrank2050/monoline-ui/footer"

Basic usage

<Footer
  brand={<Brand />}
  status={<Footer.Status>Open to work</Footer.Status>}
  columns={[
    { title: "Navigate", links: [
      { label: "Projects", href: "/projects" },
      { label: "Blog", href: "/blog" },
    ]},
    { title: "Elsewhere", links: [
      { label: "GitHub", href: "https://github.com/chitranklabs", external: true },
    ]},
  ]}
  subscribe={<Footer.Subscribe />}
  meta="© 2026 · v3.2.0"
  attribution="Next 15 · Sanity · Tailwind 4"
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Footer combines site-wide copy, grouped resource links, an optional status, and a native or caller-supplied subscription form.

Avoid when

The controls belong only to the current page, or a small legal footer is all the site needs.

Accessibility

Footer provides a footer landmark, labeled navigation groups, native links, and labeled form controls for email subscriptions.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

brandReactNodeBrand block - usually a wordmark + tagline + status pill

columnsColumn[]Array of { title, links } - auto-laid into 2/3/4 cols

subscribeReactNode?Optional subscribe form slot - adds a 4th column

metaReactNode?Left-aligned text in the bottom bar

attributionReactNode?Right-aligned text in the bottom bar

Design tokens

Theme variables this component reads for color, spacing, and motion.

--ml-footer-y-sm/md/lgCSS varVertical padding for each component size

--ml-footer-x-sm/md/lgCSS varHorizontal container padding by size

--ml-footer-layout-cols-*-desktopCSS varDesktop grid tracks

--ml-footer-subscribe-control-heightCSS varInline subscribe input height

--duration-microCSS varLink and subscribe-control feedback

Implementation

The source used by the example above, including any state it needs.

import { Footer } from "@chitrank2050/monoline-ui/footer"

export function SiteFooter() {
  return (
    <Footer
      size="md"
      columns={[
        { title: "Navigate", links: [
          { label: "Projects", href: "/projects" },
          { label: "Blog", href: "/blog" },
        ]},
        { title: "Elsewhere", links: [
          { label: "GitHub", href: "https://github.com", external: true },
        ]},
      ]}
      subscribe={<Footer.Subscribe />}
      meta="© 2026 · v3.2.0"
      attribution="Next 15 · Sanity · Tailwind 4"
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentLink ListComponent · ReferenceReference→02ComponentInputComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview