How to build a responsive website footer in React and Tailwind

The footer is where visitors go when they can't find something in the navigation, and where search engines find links to every important page. This tutorial uses ReactFrame's free Footer Section.

1. Install

npx shadcn@latest add @reactframe/footer-section

2. Add your links

import { FooterSection } from "@/components/footer-section";

const columns = [
  {
    title: "Product",
    links: [
      { label: "Features", url: "/features" },
      { label: "Pricing", url: "/pricing" },
      { label: "Changelog", url: "/changelog" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", url: "/about" },
      { label: "Careers", url: "/careers" },
      { label: "Contact", url: "/contact" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Privacy", url: "/privacy" },
      { label: "Terms", url: "/terms" },
    ],
  },
];

export function SiteFooter() {
  return <FooterSection columns={columns} copyrightText="© 2026 Acme Inc. All rights reserved." createdByText="" />;
}

createdByText="" removes the "Built with ReactFrame" credit. Put <SiteFooter /> in your root layout so every page gets it.

3. Match your brand

theme is "dark" (default), "light" or "custom". With "custom", set the colours yourself:

<FooterSection
  theme="custom"
  customColors={{ bg: "#0b1220", fg: "#e2e8f0", headingColor: "#ffffff", linkColor: "#94a3b8", copyrightColor: "#64748b" }}
  accentColor="#38bdf8"
  columns={columns}
/>

accentColor colours the hover state, and hoverUnderline (on by default) draws an underline under the link being hovered.

What belongs in a footer

• The pages people look for last: pricing, contact, careers, docs, status.
• Legal links: privacy policy, terms, cookie settings. Many laws expect these to be reachable from every page.
• Contact details or social profiles if you're a local business; the same name, address and phone as your Google Business Profile.
• Not every page you have. Three to five columns of a handful of links each. A footer with 80 links helps neither people nor search engines.

More footers

If you want a newsletter field, a big wordmark or a CTA above the links, see the footer collection: Footer Premium is also free, and Footer Columns, Footer CTA, Footer Wordmark and Footer Mega cover the other layouts.