A footer is a directory, not a farewell. The version that works links to everything the page above could not hold: second-tier navigation, legal pages, contact details, the sitemap, the language switcher. The version that does not work is a centred logo, a copyright line and three social icons, which is what most sites ship, because the footer is the last thing anyone gets to.
54 public components on 21st have "footer" in the name. For a block that renders on every page of a site, that is a thin catalogue, and it tells you where the attention goes. Below are the shapes that keep coming back, the most-bookmarked example of each, and the part almost nobody treats seriously: the footer is the widest internal link surface a site has.
The link matrix
The default for anything past a dozen pages: four to six columns of grouped links, a logo on the left, social icons and legal at the bottom.
Footer by Ali Imam (461) is the full version: six labelled sections, a wall of social icons, a theme toggle, and a copyright year that updates itself. Footer 7 from Shadcnblocks.com (356) is the restrained take, described by its author as menu links, logo, social, copyright and legal, which is most of what a footer needs.
If you would rather configure than edit, Footer by nevsky118 (377) takes its social links, main links and legal links as props, so the content sits in one object rather than scattered through JSX. That matters more than it sounds: the footer is the block most likely to be edited by someone who did not write it.
Minimal Footer by Efferd (333) is the two-column version, company links and resources with social icons, which is the right size for a product under twenty pages.
The single line
Logo, a row of links, copyright. Nothing else.
Footer Taped Design by Radu Popescu (424) is the interesting one here, because it ships active and "coming soon" states as part of the design. That solves a real problem: the single-line footer breaks the moment you need to reference a page that does not exist yet, and the usual answers are a dead link or a silent gap.
Use this shape when the site genuinely is small. On a site with sixty pages it is not minimalism, it is hiding fifty of them.
The one that performs
The most-saved footer on 21st is in this family, by a wide margin. Motion Footer by Hossain Jahed (3,583) is a GSAP ScrollTrigger curtain reveal: the footer sits behind the page and is uncovered as you reach the bottom, with a diagonal marquee, oversized masked type and a magnetic button.
The neighbouring takes: Footer Section by Efferd (1,792), an animated SaaS footer built on Motion; Sticky Footer by the same author (365), multi-column and revealed on scroll; Hover Footer by mdafsarx (974), where a large text effect answers the cursor on wide screens; and Modem Animated Footer by Deepak Modi (442), animated background type behind a floating brand mark. Flickering Footer by Erik X (475) and Stacked Circular Footer by Arihant jain (325) close out the list.
Two things to check first. The reveal patterns need the footer fixed behind the scrolling content, so the page above must carry its own background or the footer shows through. And the cursor-driven effects have no touch equivalent, so the mobile version has to be designed rather than inherited.
The newsletter one
Ruixen Gradient Footer by Ruixen UI (522) is the component in this list that ships the whole pattern: an email field with a join button, four link columns (Product, Resources, Company, Legal), and a tall blurred gradient that grows up from the floor as you reach the bottom of the page.
A footer subscribe form converts poorly per impression and well in absolute terms, because every page carries it. If you add one, give the input a real <label>, put it in a <form> that still works if the JavaScript fails, and say what someone is subscribing to and how often. A button marked "Subscribe" next to a naked input is the least trustworthy element on most sites.
The part everyone skips
Footers are discussed as a design problem. They are mostly a crawl problem.
The footer is the only block that links from every page, which makes it the widest internal link surface you have, and internal links are how a crawler finds pages and judges which ones matter. Six things follow.
What you put there is a statement of priority. A page linked only from the footer is still one hop from everywhere, which is why the footer is the right home for sections with no natural place in the main navigation. A page linked from nowhere is a page nobody crawls.
Link text carries more than link count. "Pricing for teams" tells a crawler and a reader what is at the other end. "Learn more", a bare icon, or "click here" tell them nothing. Descriptive anchor text in the footer costs nothing and most sites leave it unclaimed.
Three hundred links dilute rather than help. A link that repeats on every page is a weaker signal than one placed deliberately inside the content, and if everything is linked then nothing is prioritised. Long lists of locations or keyword variants stuffed into a footer are one of the oldest patterns on the web, and they are recognised as such. Keep the set to pages you would defend one by one.
Legal and contact links are trust signals, not paperwork. Privacy policy, terms, a real address, a way to reach a person. Guidance on assessing page quality has long treated "can a reader work out who is behind this" as a basic question, and the footer is where they look for the answer. The same holds for answer engines, which want an identifiable publisher before they name one.
The sitemap and the language switcher live here. An HTML sitemap link gives crawlers and readers one page that reaches everything, which matters most where the navigation exposes only a slice. A visible language switcher belongs here too, but realise it is only the human half: the machine-readable half is hreflang alternates in the head or in your XML sitemap, and shipping the switcher without them is common.
A client-only footer is a footer nothing sees. If it sits behind dynamic(..., { ssr: false }), or only mounts inside an effect, it is not in the HTML your server returns. Google does render JavaScript, but rendering is queued rather than guaranteed for every page, and most other clients (answer engines, LLM fetchers, link unfurlers, anything doing a plain HTTP GET) do not run it at all. Keep the footer in the layout, keep it server-rendered, and keep every link a real <a href> instead of an onClick that calls the router. Then view source on your own site and search for a footer link. A surprising number of production sites fail that ten-second test.
Where else to look
The honest list of alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | The separator, input and button underneath the layout | There is no footer block at all; the composition is yours |
| Tailwind Plus | Conventional multi-column footers with the responsive states solved | Paid, and every site built from it looks related |
| Flowbite | Free, generic footer markup to start from | The look is Flowbite's, and the richer blocks sit behind a paid tier |
| 21st | Community footers, including the scroll-revealed and animated ones | Quality varies by author, so preview before you take it |
The practical split: primitives from your own design system, composition from wherever it already exists rather than a four-column layout rebuilt for the fourth time.
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a footer, get the previews inline, and let the agent write the file.
Frequently asked
- What should a website footer include?
- A footer carries the second-tier navigation that has no place in the main menu, the legal pages (privacy policy and terms), a real way to reach whoever runs the site, and a link to the sitemap. Multilingual sites put the language switcher there too. Social icons and a copyright line are the parts everyone remembers and the least useful of the set.
- Does the footer matter for SEO?
- It is the only block that links from every page, which makes it the widest internal link surface a site has, and internal links are how crawlers discover pages and form a view of which ones matter. Descriptive link text does more work there than link volume: a footer stuffed with hundreds of repeated links dilutes the signal rather than strengthening it. The legal and contact links matter as well, because being able to tell who is behind a site is a basic trust question for readers and answer engines alike.
- Should a footer be server-rendered?
- Yes. A footer behind a client-only dynamic import, or one that mounts inside an effect, is absent from the HTML the server returns, so every link in it is invisible to anything that does not execute JavaScript. Google does render JavaScript, but rendering is queued rather than guaranteed for every page, and most other clients (answer engines, LLM fetchers and link unfurlers) never run it at all. Keep the footer in the layout and keep each link a real anchor with an href rather than a click handler.
- Where can I find React footer components?
- 54 public components on 21st have footer in the name, covering multi-column link matrices, single-line minimal footers, scroll-revealed animated ones and newsletter layouts, each with a live preview. They are at 21st.dev/community/components/s/footer. shadcn/ui ships no footer block of its own, so the usual route is to compose one from its primitives or take an existing composition and swap the links.