App Footer

The footer of an application or marketing page: a line of text, link lists and social links. It stacks on a phone and has the same size and spacing on every page.

Blockv0.1.0experimentalWCAG 2.2 AAView spec

A ready-made piece, built from the library's own parts.

A block puts several components together into something you would otherwise assemble by hand. It never fetches data: you give it the data, or answer its callbacks. It is copied into your project like any component, with the parts it uses, so you can change anything.

Simple

Full screen

Columns

Full screen

With router link

Full screen

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add app-footer

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/app-footer.json

Works, but without upgrade tracking.

Usage

import { AppFooter } from "@rdloom/react";

<div className="flex min-h-[14rem] w-full items-center justify-center">
  <div className="w-full max-w-5xl">
    <AppFooter
      text="© 2026 rdloom. All rights reserved."
      links={[
        { label: "Privacy", href: "/privacy" },
        { label: "Terms", href: "/terms" },
        { label: "Status", href: "https://status.example.com", external: true },
      ]}
    />
  </div>
</div>

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`text` The text on the left, usually the copyright line.	`node`	none
`links` Footer links: a flat list of { label, href }, or groups of { title, links } for the columns layout.	`FooterLink[] \| FooterLinkGroup[]`	none
`social` Social links, such as icon buttons. Give each one an accessible name.	`node`	none
`layout` simple is one row; columns lists each group under its heading.	`"simple" \| "columns"`	`"simple"`
`navLabel` Name of the footer navigation landmark.	`string`	`"Footer"`
`renderLink` Draw links as your router's link. Return the link with the given className and children.	`(props: { link: FooterLink; className: string; children: ReactNode }) => ReactNode`	none
`classNames` Extra class names for single parts, so you can restyle one part without editing the file. Keys: root, inner, text, nav, group, groupTitle, list, link, social.	`Partial<Record<"root" \| "inner" \| "text" \| "nav" \| "group" \| "groupTitle" \| "list" \| "link" \| "social", string>>`	none

Accessibility

Role contentinfo, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Tab: moves through the links, then the social slot

Screen readers announce

"Footer, navigation"
"Product, heading level 2", then its links as a list

What your code must do

The footer is the page's contentinfo landmark; use one per page
The links sit in a navigation landmark with its own name ("Footer" by default)
In the columns layout each group has a real heading, so people can jump between groups
Links to other sites that open in a new tab say so to screen readers

Block contract

Data: Link groups as plain { label, href } objects, and a text line.
Data states: ready
Permissions: None yet
Events: None
You can replace: renderLink (your router's link); classNames for each part; text and social slots

Guidelines

Use it when

The bottom of an application shell, a marketing page or an auth screen

Avoid it when

Page-level actions or pagination: those belong in the page

Don't

Different padding or width on each page: use the footer as it is and restyle it once through classNames
More than one footer on a page

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-text-default
--rd-color-text-muted
--rd-color-border-default
--rd-color-surface-default
--rd-color-focus-ring