react-dev-footer

A drop-in "made by" attribution footer for React apps. Show who built the site — name, email, contact, GitHub, LinkedIn, Facebook, Instagram, Twitter/X, website — with a color theme you control per project.

npm install react-dev-footer

Usage

import { DevFooter } from "react-dev-footer";

function App() {
  return (
    <>
      {/* ...your page content... */}

      <DevFooter
        name="Syed Muhammad Ali"
        email="[email protected]"
        github="syedmuhammadali-dev"
        linkedin="syed-muhammed-ali"
        website="https://ali-portfolio-nine.vercel.app/"
      />
    </>
  );
}

Renders, at the bottom of the page:

© 2026 Made with ❤ by Syed Muhammad Ali ✉️ 🌐 🐙 in

Props

| Prop | Type | Default | Description | | ------------ | --------------------- | ---------------------- | -------------------------------------------------- | | name | string | — | Developer/team name (required) | | prefix | string | "Made with ❤ by" | Text shown before the name | | customText | React.ReactNode | — | Extra text/node rendered after the name | | showYear | boolean | true | Show © <year> before the credit line | | year | number | current year | Override the displayed year | | email | string | — | Raw email or full mailto: link | | contact | string | — | Phone number, or full tel:/https: link | | website | string | — | Portfolio/site link | | github | string | — | Username or full URL | | linkedin | string | — | Username or full URL | | facebook | string | — | Username or full URL | | instagram | string | — | Username or full URL | | twitter | string | — | Username or full URL (renders as X icon) | | theme | DevFooterTheme | dark theme (see below) | Full color control, see Theming | | position | "static" \| "fixed" | "static" | "fixed" pins the footer to the viewport bottom | | iconSize | number | 18 | Icon size in px | | rounded | boolean | false | Rounded corners (useful with "static" + margins) | | className | string | — | Extra class name on the <footer> element | | style | React.CSSProperties | — | Inline style overrides, merged last |

Any link left undefined is simply not rendered — pass only the socials that are relevant.

Theming

Every website can have its own footer colors:

<DevFooter
  name="Syed Muhammad Ali"
  github="syedmuhammadali-dev"
  theme={{
    background: "#ffffff",
    text: "#1f2937",
    icon: "#6b7280",
    iconHover: "#2563eb",
    border: "#e5e7eb",
    accent: "#2563eb",
  }}
/>

| Theme key | Controls | | ------------ | --------------------------------------- | | background | Footer background color | | text | Base text color | | icon | Icon color at rest | | iconHover | Icon color on hover | | border | Top border/divider color | | accent | Color of the highlighted developer name |

Default theme is a dark slate palette; pass a full or partial theme object to override — unset keys fall back to the defaults.

Fixed footer example

<DevFooter
  name="Syed Muhammad Ali"
  position="fixed"
  github="syedmuhammadali-dev"
  theme={{ background: "#111827" }}
/>

When using position="fixed", add bottom padding to your page content so the footer doesn't overlap it.

Author

Syed Muhammad Ali

• GitHub: @syedmuhammadali-dev
• LinkedIn: syed-muhammed-ali
• Portfolio: ali-portfolio-nine.vercel.app
• Email: [email protected]

License

MIT