docs / patterns / footer

Footer

brand, links and a bottom bar, in two layouts: titled columns or a flat row. external links open in a new tab; mailto, tel and in-page anchors stay put.

intensity · structuresrsc · server

provenance

shaped from personal-website · sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

the last block on a page, once, below everythingcolumns hold links. an icon may lead a linkkajo's negative pull-up margin is page layout, it stays in classNamenever holds forms, feeds or anything that scrolls

a11y

a contentinfo landmark · each column is a nav named by its title · offsite links carry an sr "opens in a new tab" hintjest-axe
live demo · try it out
customize
variantfull titled columns or one flat row
brandthe wordmark slot
taglinethe line under the brand
copyrightleft of the bottom bar
noteright of the bottom bar
glowtwo radial washes, assume a dark page
usagecopy
import { Footer } from "@usva-ui/react/patterns/footer";

<Footer
  brand={<span className="text-2xl font-black">usva.</span>}
  tagline="Designer by eye, dev by hand. Currently in Lahti."
  columns={[
    {
      title: "Index",
      links: [
        { label: "About", href: "#about" },
        { label: "Work", href: "#work" },
        { label: "Currently", href: "#currently" },
      ],
    },
    {
      title: "Elsewhere",
      tone: "accent-alt",
      links: [
        { label: "GitHub", href: "https://github.com/matt-pasek" },
        { label: "Email", href: "mailto:contact@matt-pasek.dev" },
      ],
    },
  ]}
  copyright="© 2026 Mateusz Pasek"
  note="quality > quantity"
/>

props

proptypedefaultnotes
variant"full" | "compact""full"full keeps the titled columns. compact flattens them into one untitled row.
columnsFooterColumn[][]each is { title, tone?, links }. the title is the column's accessible name, so keep it a string.
brandReactNode—the wordmark slot.
taglineReactNode—the line under the brand.
copyrightReactNode—left side of the bottom bar.
noteReactNode—right side of the bottom bar. the bar is omitted when both are absent.
glowbooleanfalsetwo decorative radial washes. opt-in because they assume a dark page.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Footer } from "@usva-ui/react/patterns/footer";

<Footer
  brand={<Wordmark />}
  columns={[{ title: "Index", links: [{ label: "About", href: "#about" }] }]}
  copyright="© 2026 Mateusz Pasek"
/>