Site footer
StableThe home pages’ footer: three link columns with a cropped wordmark, or one simple row.
columns has the logo and tagline, Product, Company and Legal link columns, the year and a contact placeholder, then the RChursin_ wordmark set huge and cropped by the page edge. simple is one row: logo, five mono links, copyright. Its words and links are written into Chrome.tsx for the home page concepts (the links are href="#" placeholders), so copy the file and edit them.
Updated View source
Columns
import { SiteFooter } from '@rchursin/home/Chrome'
/** * The columns footer that ends the home pages: logo and tagline, three link columns, the year, * a contact placeholder, and the wordmark set huge and cropped by the edge. Its words and links * live in Chrome.tsx (the links are href="#" placeholders): copy the file to make it yours. */export default function FooterColumns() { return ( <div className="flex min-h-[180px] w-full flex-col justify-end bg-surface"> <SiteFooter /> </div> )}Usage
import { SiteFooter } from '@rchursin/home/Chrome'<SiteFooter /><SiteFooter variant="simple" />Examples
Simple
One row; it stacks on a phone.
import { SiteFooter } from '@rchursin/home/Chrome'
/** The simple footer: one row with the logo, five mono links and the copyright. Stacks on a phone. */export default function FooterSimple() { return ( <div className="flex min-h-[180px] w-full flex-col justify-end bg-surface"> <SiteFooter variant="simple" /> </div> )}API
Site footer props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'columns' | 'simple' | 'columns' | columns: logo, tagline, three link columns and the wordmark. simple: one row. |
Accessibility
- A <footer>. At the top level of a page it is the contentinfo landmark; inside <main> (as in these previews) it is not a landmark.
- columns starts with a visually hidden “Footer” <h2> and labels the footer with it. That id is fixed (footer-heading), so use one columns footer per page.
- The column titles are <h3>s, so the link groups show up in a screen reader’s list of headings.
- The giant wordmark is decorative and hidden from screen readers; the logo at the top links to #top and is named “RChursin_”.
- The year is safe to prerender: the static HTML and hydration use a fixed year (2026, PRERENDER_YEAR in Chrome.tsx), then the browser switches to the visitor’s own year, so there is never a hydration mismatch.
Guidelines
Do
- Replace the placeholder links and the [YOUR CONTACT EMAIL] line before launch.
- Use simple on pages that already end with a call to action.
Don’t
- Don’t put a second columns footer on the same page.
- Don’t leave links pointing at #.
In use
Related
- Site headerThe home pages’ sticky header in three styles: a full bar, a floating glass pill and a minimal mono row.
- LogoThe 09 Frame mark and the RChursin_ wordmark in four lockups, drawn as one SVG that takes the text colour.
- Light & grainA ceiling halo for heroes, film grain for flat grounds, a fade for product shots and a shadow that follows torn paper.
Source
The component’s own files, exactly as they run on this site.
/** * Site header and footer shared by the home pages, in three header styles: * - bar Tailwind Plus header: logo left, links, actions right * - floating Aceternity floating pill over the page * - minimal logo + a few mono text links, for the developer-first page * * Details: the header is clear at the top of the page and frosts (glass + hairline) once you * scroll; the logo's underscore blinks like a cursor on hover; links draw their underline in; * the mobile menu eases down from the bar. */import { useId, useRef, useState, type ReactNode } from "react"import { Logo } from "../brand/Logo"import { cx } from "../components/cx"import { MenuIcon } from "../components/icons"import { useScrolled } from "../components/motion"import { useCurrentYear } from "../product/lib/hydration"import { nav } from "./content"import { ButtonLink, Container } from "./ui"
export function SkipLink() {