Wensity

React footer components

Footers that close a page properly, from a four column sitemap to a single line of legal text. Install one command and the source lands in your repository.

Browse all footer blocksRead the docs

Built with the stack you already ship

React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Vite
Astro
React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Vite
Astro

Footer blocks you can copy

Each footer is one file with its own layout, link structure and responsive rules. Preview it live, then copy the whole thing into your project.

Parts a footer is built from

Swap a column, add a form, or build a footer of your own from the same primitives these blocks use. All of them are keyboard accessible out of the box.

How to choose a footer

A footer is the last thing on the page and the first place people look when they cannot find something. It carries the links that do not deserve a spot in the top navigation: pricing tiers, documentation, careers, privacy, the support address. Treat it as the site map it actually is. If a visitor scrolls to the bottom, they are usually looking for a specific thing rather than browsing, so the labels matter more than the layout.

Match the size of the footer to the size of the site. A product with four pages does not need a four column grid, and padding one out with invented headings makes the site look thinner rather than fuller. Footer With Call To Action Band is close to the minimum that still feels finished: a wordmark, one row of links, and a call to action. At the other end, Footer With Pixel Grid Wordmark carries four columns plus a newsletter field, which suits a site with real documentation behind it.

Decide early whether the footer is quiet or loud. Most are quiet: muted text, a hairline above, nothing that competes with the content it follows. Footer With Glowing Wordmark and Footer With Newsletter Signup take the other route with gradients and a lit edge, which works when the footer is the last chance to convert and the page above it has already made the argument. Picking loud for a documentation site tends to read as noise.

The newsletter field is the one decision worth thinking about rather than defaulting. It earns its place when you actually publish something on a schedule. If you do not, an empty subscribe box is a promise the site does not keep, and it pushes the links people came for further down. Leave it out and give the space back to navigation.

Whichever you pick, keep the legal row honest and boring. Copyright line, terms, privacy, and a real contact route. Put it under a separator at the smallest readable size, in DOM order after the main links so keyboard users reach the useful navigation first. That row is not where a design should try to be interesting.

Frequently asked questions

Run the Wensity CLI with the block slug, for example npx wensity@latest add footer-with-four-column-links --type block. The CLI writes the component into your codebase, pulls in the packages it needs, and picks up your existing Tailwind theme. You can also open any footer on this page and copy the source from the Code tab. There is no provider to wire up.
Three or four is the range most products land on, because that is what fits on a laptop without the eye having to scan sideways. Footer With Newsletter Signup and Footer With Pixel Grid Wordmark both use four. If you have fewer than about twelve links in total, splitting them across two columns reads better than spreading them thin across four. A stacked footer is the other way out, and it suits a site whose bottom row is mostly legal and policy links.
Every footer here collapses to a single column below the medium breakpoint, with the columns stacking in DOM order. Nothing is hidden and nothing scrolls sideways. If your footer runs long on a phone, Collapsible turns each column heading into a disclosure so the list stays reachable without filling the screen.
The form markup, validation states and success message are all included, but the submit handler is left as a plain function for you to fill in. Point it at whichever service you already use. Footer With Newsletter Signup and Footer With Pixel Grid Wordmark are the two that ship with a newsletter field.
Put it in your root layout so it renders once and appears on every route. In the App Router that means app/layout.tsx, which also keeps it out of the way of page level loading and error boundaries. Moving it into individual pages means it remounts on every navigation, which is wasted work for a component that never changes.

Where to go next