53 / Blocks

Footer Row

A wrapping row of links under its own label, set apart by a dashed rule.

Other products

"use client"

import { FooterRow } from "mischief-ui/footer-row"

const products = [
  { label: "Maillayer", href: "#" },
  { label: "Post Scheduler", href: "#" },
  { label: "Traffic Source", href: "#" },
  { label: "Meta Tags", href: "#" },
  { label: "Blog CMS", href: "#" },
]

export function FooterRowDemo() {
  return (
    <div className="w-full max-w-2xl">
      <FooterRow label="Other products" links={products} />
    </div>
  )
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/footer-row

import { FooterRow } from "mischief-ui/footer-row"

Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.

registry/default/footer-row/footer-row.tsx

1import * as React from "react"2 3import { cn } from "@/lib/utils"4 5/** The same shapes Footer Columns uses, so the two interchange. */6export type FooterLink = {7  label: React.ReactNode8  href: string9  external?: boolean10}11 12export type FooterLinkRenderer = (link: FooterLink) => React.ReactNode13 14const LABEL = "text-[0.6875rem] font-medium tracking-[0.09em] uppercase"

Usage

export function OtherProducts() {
  return <FooterRow label="Other products" links={products} />
}

A row rather than a column

Some footer links are a list rather than a category: sister products, a legal strip, an A to Z index. A column would give each of them a heading they do not need and a height they do not fill.

Nothing is rendered when there are no links, so a row driven by data that happens to be empty leaves no stray rule behind.

<FooterRow label="Other products" links={products} />
<FooterRow links={legal} rule={false} />

Turn the rule off where the row already sits under one.

API

linksFooterLink[]The links, laid out as a wrapping row.

labelReactNodeThe small uppercase heading. Optional.

renderLink(link: FooterLink) => ReactNodeRenders every link, as in Footer Columns.

rulebooleanThe dashed rule above. Defaults to true.

Accessibility

Nothing else has to be installed for it: the link shapes it takes are the same ones Footer Columns takes, written out here rather than imported, so the two interchange without either depending on the other. The row is a list, so its length is announced before its contents. The label is plain text rather than a heading, and the rule above it is a border rather than a separator element, so neither adds noise to the page outline.