Simple Footer Sections
Every simple footer design for Next.js and React projects — minimal, single-column, centered, inline links, dark, light, and more. Built with shadcn/ui, Tailwind CSS, and TypeScript.
Simple Footer Sections
This collection covers straightforward footer section patterns used in modern web design. Most are built for React.js, Next.js, and shadcn/ui projects out of the box. Some require additional shadcn/ui components, Framer Motion for modern animations, or minor configuration. Browse the full list below and pick the one that fits the project.
Multi-Column Footer with Social Links
Loading preview...
This simple footer section design uses:
- Color scheme of shadcn/ui
Linkcomponent of Next.js- An icon library (Tabler Icons)
- Two components of shadcn/ui as well —
ButtonandSeparator
All of these make this ui block specific for shadcn/ui and Next.js project.
However, below is the generic source code, suitable for every React.js and Tailwind project:
<footer
className="p-4 sm:p-6 border-t border-t-neutral-200 bg-neutral-50 text-neutral-900 dark:border-t-neutral-800 dark:bg-neutral-950 dark:text-neutral-300 mt-auto"
>
<div className="mx-auto max-w-7xl">
<div className="md:flex md:justify-between gap-8">
<div className="mb-8 md:mb-0 space-y-8 flex-1 shrink-0">
<a href="https://www.devredbox.in/" className="flex items-center">
<svg
className="mr-3 w-26 h-8"
width="100%"
height="100%"
viewBox="0 0 344 73"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="DevRedBox Studio"
>
<path
d="M116.136 72.128C110.747 72.128 106.016 71.1253 101.942 69.12C97.869 67.052 94.673 64.2007 92.3543 60.566C90.0983 56.8687 88.9703 52.6387 88.9703 47.876C88.9703 43.176 90.067 39.0087 92.2603 35.374C94.5163 31.7393 97.587 28.888 101.472 26.82C105.358 24.6893 109.744 23.624 114.632 23.624C119.458 23.624 123.719 24.6267 127.416 26.632C131.114 28.5747 133.996 31.3007 136.064 34.81C138.195 38.3193 139.26 42.33 139.26 46.842C139.26 47.782 139.198 48.7847 139.072 49.85C139.01 50.8527 138.822 52.0433 138.508 53.422L96.7723 53.704V42.424L131.646 42.142L123.092 47.124C123.092 44.6173 122.779 42.5807 122.152 41.014C121.588 39.3847 120.711 38.1627 119.52 37.348C118.33 36.5333 116.826 36.126 115.008 36.126C113.128 36.126 111.499 36.596 110.12 37.536C108.742 38.476 107.676 39.8233 106.924 41.578C106.235 43.3327 105.89 45.4633 105.89 47.97C105.89 50.5393 106.266 52.7013 107.018 54.456C107.833 56.148 108.992 57.4327 110.496 58.31C112 59.1873 113.88 59.626 116.136 59.626C118.33 59.626 120.241 59.2813 121.87 58.592C123.562 57.84 125.098 56.6807 126.476 55.114L135.688 64.232C133.37 66.864 130.581 68.838 127.322 70.154C124.064 71.47 120.335 72.128 116.136 72.128Z"
fill="currentColor"
/>
<path
d="M222.213 71.94C219.456 71.94 216.855 71.4073 214.411 70.342C211.967 69.2767 209.899 67.8667 208.207 66.112C206.515 64.2947 205.419 62.3207 204.917 60.19V34.622C205.419 32.4913 206.515 30.6113 208.207 28.982C209.899 27.3527 211.967 26.0993 214.411 25.222C216.855 24.282 219.456 23.812 222.213 23.812C226.788 23.812 230.767 24.846 234.151 26.914C237.598 28.9193 240.261 31.7393 242.141 35.374C244.084 39.0087 245.055 43.176 245.055 47.876C245.055 52.576 244.084 56.7433 242.141 60.378C240.261 63.95 237.598 66.77 234.151 68.838C230.767 70.906 226.788 71.94 222.213 71.94ZM193.731 71V2.192H212.155V36.126L209.147 47.312L211.685 58.592V71H193.731ZM218.829 55.772C220.333 55.772 221.649 55.4273 222.777 54.738C223.968 54.0487 224.877 53.1087 225.503 51.918C226.193 50.7273 226.537 49.38 226.537 47.876C226.537 46.372 226.193 45.0247 225.503 43.834C224.877 42.6433 223.968 41.7033 222.777 41.014C221.587 40.3247 220.239 39.98 218.735 39.98C217.231 39.98 215.884 40.3247 214.693 41.014C213.565 41.7033 212.688 42.6433 212.061 43.834C211.435 44.962 211.121 46.3093 211.121 47.876C211.121 49.4427 211.435 50.8213 212.061 52.012C212.751 53.2027 213.659 54.1427 214.787 54.832C215.978 55.4587 217.325 55.772 218.829 55.772Z"
fill="currentColor"
/>
<path
d="M322.853 71L313.923 54.644L309.599 52.294L291.175 24.752H312.231L321.255 41.296L325.485 43.458L343.721 71H322.853ZM290.235 71L309.411 43.176L319.751 54.174L309.599 71H290.235ZM324.357 52.294L314.017 41.296L323.417 24.752H342.781L324.357 52.294Z"
fill="currentColor"
/>
<path
d="M273.099 72.128C268.023 72.128 263.48 71.094 259.469 69.026C255.521 66.8953 252.388 63.9813 250.069 60.284C247.813 56.5867 246.685 52.4193 246.685 47.782C246.685 43.1447 247.813 39.0087 250.069 35.374C252.325 31.7393 255.427 28.888 259.375 26.82C263.386 24.6893 267.929 23.624 273.005 23.624C278.081 23.624 282.593 24.6893 286.541 26.82C290.489 28.888 293.591 31.7393 295.847 35.374C298.166 39.0087 299.325 43.1447 299.325 47.782C299.325 52.4193 298.197 56.5867 295.941 60.284C293.685 63.9813 290.583 66.8953 286.635 69.026C282.687 71.094 278.175 72.128 273.099 72.128ZM273.005 55.96C274.572 55.96 275.919 55.6467 277.047 55.02C278.238 54.3307 279.146 53.3907 279.773 52.2C280.4 50.9467 280.713 49.5053 280.713 47.876C280.713 46.2467 280.368 44.8367 279.679 43.646C279.052 42.3927 278.175 41.4527 277.047 40.826C275.919 40.1367 274.572 39.792 273.005 39.792C271.501 39.792 270.154 40.1367 268.963 40.826C267.835 41.5153 266.926 42.4867 266.237 43.74C265.61 44.9307 265.297 46.3407 265.297 47.97C265.297 49.5367 265.61 50.9467 266.237 52.2C266.926 53.3907 267.835 54.3307 268.963 55.02C270.154 55.6467 271.501 55.96 273.005 55.96Z"
fill="currentColor"
/>
<path
d="M163.753 71.94C159.179 71.94 155.168 70.906 151.721 68.838C148.337 66.77 145.674 63.95 143.731 60.378C141.851 56.7433 140.911 52.576 140.911 47.876C140.911 43.176 141.851 39.0087 143.731 35.374C145.674 31.7393 148.337 28.9193 151.721 26.914C155.168 24.846 159.179 23.812 163.753 23.812C166.511 23.812 169.111 24.282 171.555 25.222C173.999 26.0993 176.067 27.3527 177.759 28.982C179.514 30.6113 180.611 32.4913 181.049 34.622V60.19C180.611 62.3207 179.514 64.2947 177.759 66.112C176.067 67.8667 173.999 69.2767 171.555 70.342C169.111 71.4073 166.511 71.94 163.753 71.94ZM167.137 55.772C168.704 55.772 170.051 55.4587 171.179 54.832C172.307 54.1427 173.185 53.2027 173.811 52.012C174.501 50.8213 174.845 49.4427 174.845 47.876C174.845 46.3093 174.532 44.962 173.905 43.834C173.279 42.6433 172.37 41.7033 171.179 41.014C170.051 40.3247 168.735 39.98 167.231 39.98C165.727 39.98 164.38 40.3247 163.189 41.014C162.061 41.7033 161.153 42.6433 160.463 43.834C159.774 45.0247 159.429 46.372 159.429 47.876C159.429 49.38 159.743 50.7273 160.369 51.918C161.059 53.1087 161.999 54.0487 163.189 54.738C164.38 55.4273 165.696 55.772 167.137 55.772ZM192.235 71H174.281V58.592L176.819 47.312L173.811 36.126V2.192H192.235V71Z"
fill="currentColor"
/>
<path
d="M56.708 72V25.752H75.132V72H56.708ZM75.132 46.996L66.578 39.382C68.9594 34.3687 71.7167 30.7027 74.85 28.384C78.046 26.0027 82.0254 24.812 86.788 24.812C88.9187 24.812 90.736 25.0627 92.24 25.564C93.8067 26.0653 95.06 26.786 96 27.726L85.66 42.39C85.2214 41.8887 84.5634 41.4813 83.686 41.168C82.8714 40.792 81.9 40.604 80.772 40.604C78.892 40.604 77.482 41.168 76.542 42.296C75.602 43.3613 75.132 44.928 75.132 46.996Z"
fill="currentColor"
/>
<path
d="M58 3C64.0751 3 69 7.92487 69 14V61C69 67.0751 64.0751 72 58 72H11C4.92487 72 0 67.0751 0 61V14C1.03081e-06 7.92487 4.92487 3 11 3H58ZM39.5703 30.7803V33.1797H49.6699V30.7803H39.5703ZM24.4873 20.0596C23.5007 20.0596 22.6137 20.2798 21.8271 20.7197C21.0405 21.1597 20.4139 21.7668 19.9473 22.54C19.494 23.2999 19.2667 24.1665 19.2666 25.1396C19.2666 26.1129 19.5002 26.9865 19.9668 27.7598C20.4334 28.5331 21.0735 29.1401 21.8867 29.5801C22.7134 30.0067 23.6537 30.2197 24.707 30.2197C25.5203 30.2197 26.2673 30.0798 26.9473 29.7998C27.627 29.5198 28.2066 29.0998 28.6865 28.54L27.0068 26.8604C26.7136 27.1935 26.3738 27.4468 25.9873 27.6201C25.6006 27.7801 25.1665 27.8604 24.6865 27.8604C24.1668 27.8603 23.7137 27.7533 23.3271 27.54C22.9538 27.3134 22.6606 26.9996 22.4473 26.5996C22.3801 26.4608 22.3239 26.3131 22.2793 26.1562L29.2471 26.1396C29.3003 25.8867 29.3333 25.6669 29.3467 25.4805C29.3733 25.2805 29.3867 25.0933 29.3867 24.9199C29.3867 23.9734 29.1736 23.1336 28.7471 22.4004C28.3338 21.6671 27.7606 21.093 27.0273 20.6797C26.2941 20.2664 25.4472 20.0596 24.4873 20.0596ZM15.0928 15.4805V20.9111C14.8707 20.7361 14.6239 20.5857 14.3525 20.46C13.8193 20.2067 13.2193 20.0801 12.5527 20.0801C11.6328 20.0801 10.8127 20.3003 10.0928 20.7402C9.38611 21.1802 8.82544 21.78 8.41211 22.54C8.01221 23.2999 7.81255 24.1665 7.8125 25.1396C7.8125 26.113 8.01211 26.9802 8.41211 27.7402C8.82544 28.5002 9.38612 29.1 10.0928 29.54C10.8127 29.9799 11.6329 30.2002 12.5527 30.2002C13.2192 30.2002 13.8255 30.0664 14.3721 29.7998C14.6601 29.6523 14.9198 29.4798 15.1523 29.2842V30H18.1523V15.4805H15.0928ZM29.248 20.2803L33.3682 30H35.8281L39.9473 20.2803H36.708L34.6279 26.2969L32.5479 20.2803H29.248ZM13.1123 22.8398C13.5389 22.8398 13.9125 22.9397 14.2324 23.1396C14.5657 23.3396 14.8189 23.6134 14.9922 23.96C15.1788 24.2932 15.2724 24.6865 15.2725 25.1396C15.2725 25.593 15.1788 25.9932 14.9922 26.3398C14.8055 26.6865 14.5524 26.9602 14.2324 27.1602C13.9125 27.3467 13.5326 27.4404 13.0928 27.4404C12.6794 27.4404 12.306 27.3396 11.9727 27.1396C11.6394 26.9397 11.379 26.6669 11.1924 26.3203C11.0057 25.9736 10.9121 25.5796 10.9121 25.1396C10.9122 24.6998 11.0058 24.3065 11.1924 23.96C11.3924 23.6133 11.6527 23.3396 11.9727 23.1396C12.3059 22.9398 12.6858 22.8399 13.1123 22.8398ZM24.5068 22.4004C24.9601 22.4004 25.3399 22.5003 25.6465 22.7002C25.9665 22.8869 26.2072 23.1667 26.3672 23.54C26.434 23.6904 26.4861 23.8587 26.5273 24.0439L22.2812 24.0557C22.3211 23.9156 22.3691 23.7837 22.4268 23.6602C22.6268 23.2602 22.9004 22.9536 23.2471 22.7402C23.607 22.5136 24.0269 22.4004 24.5068 22.4004Z"
fill="currentColor"
/>
</svg>
<span className="sr-only">DevRedBox Studio</span>
</a>
<p className="text-sm text-neutral-600 dark:text-neutral-500 max-w-sm">Started in India. Empowering ideas worldwide. DevRedBox build, launch, ship, and scale SaaS projects.</p>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-8 sm:gap-12 flex-1 shrink-0">
{
FOOTER_LINKS.map(item => (
<div key={`footer-link-${item.title}`}>
<h2 className="mb-6 text-sm font-semibold uppercase">
{item.title}
</h2>
<ul className="">
{
item.links.map(link => (
<li className="mb-4" key={`footer-link-${item.title}-${link.url}`}>
<a href="/ui-blocks" className="hover:underline text-neutral-600 dark:text-neutral-500">
{link.name}
</a>
</li>
))
}
</ul>
</div>
))
}
</div>
</div>
<div className="h-px w-full bg-neutral-200 dark:bg-neutral-800 my-12 mask-l-from-80% mask-r-from-80%" />
<div className="sm:flex sm:items-center sm:justify-between">
<span className="text-sm sm:text-center text-neutral-500">
© 2026{" "}
<a href="https://www.devredbox.in" className="hover:underline">
DevRedBox
</a>
. All Rights Reserved.
</span>
<div className="flex mt-4 space-x-6 sm:justify-center items-center sm:mt-0 [&_a]:transition-all [&_a]:duration-300 [&_a]:text-neutral-600 [&_a]:hover:text-neutral-900 dark:[&_a]:text-neutral-500 dark:[&_a]:hover:text-neutral-300">
<a
href="https://www.instagram.com/devredbox.studio/"
target="_blank"
rel="noopener"
>
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="currentColor" className="size-5" aria-label="Instagram Icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M16 3a5 5 0 0 1 5 5v8a5 5 0 0 1 -5 5h-8a5 5 0 0 1 -5 -5v-8a5 5 0 0 1 5 -5zm-4 5a4 4 0 0 0 -3.995 3.8l-.005 .2a4 4 0 1 0 4 -4m4.5 -1.5a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1" />
</svg>
<span className="sr-only">Instagram</span>
</a>
<a
href="https://www.youtube.com/@devredbox"
target="_blank"
rel="noopener"
>
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="currentColor" className="size-5" aria-label="YouTube Icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 3a5 5 0 0 1 5 5v8a5 5 0 0 1 -5 5h-12a5 5 0 0 1 -5 -5v-8a5 5 0 0 1 5 -5zm-9 6v6a1 1 0 0 0 1.514 .857l5 -3a1 1 0 0 0 0 -1.714l-5 -3a1 1 0 0 0 -1.514 .857z" />
</svg>
<span className="sr-only">YouTube</span>
</a>
<a
href="https://linkedin.com/in/armaanchaand/"
target="_blank"
rel="noopener"
>
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="currentColor" className="size-5" aria-label="LinkedIn Icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M17 2a5 5 0 0 1 5 5v10a5 5 0 0 1 -5 5h-10a5 5 0 0 1 -5 -5v-10a5 5 0 0 1 5 -5zm-9 8a1 1 0 0 0 -1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0 -1 -1m6 0a3 3 0 0 0 -1.168 .236l-.125 .057a1 1 0 0 0 -1.707 .707v5a1 1 0 0 0 2 0v-3a1 1 0 0 1 2 0v3a1 1 0 0 0 2 0v-3a3 3 0 0 0 -3 -3m-6 -3a1 1 0 0 0 -.993 .883l-.007 .127a1 1 0 0 0 1.993 .117l.007 -.127a1 1 0 0 0 -1 -1" />
</svg>
<span className="sr-only">LinkedIn</span>
</a>
<a href="http://x.com/devredbox" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="currentColor" className="size-5" aria-label="X Icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M8.267 3a1 1 0 0 1 .73 .317l.076 .092l4.274 5.828l5.946 -5.944a1 1 0 0 1 1.497 1.32l-.083 .094l-6.163 6.162l6.262 8.54a1 1 0 0 1 -.697 1.585l-.109 .006h-4.267a1 1 0 0 1 -.73 -.317l-.076 -.092l-4.276 -5.829l-5.944 5.945a1 1 0 0 1 -1.497 -1.32l.083 -.094l6.161 -6.163l-6.26 -8.539a1 1 0 0 1 .697 -1.585l.109 -.006h4.267z" />
</svg>
<span className="sr-only">Twitter (X)</span>
</a>
<button
type="button"
className="inline-flex h-10 aspect-square border rounded-lg justify-center items-center shadow cursor-pointer border-neutral-200 bg-neutral-50 text-neutral-600 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-500 dark:hover:text-neutral-300 transition-all"
>
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="currentColor" className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" aria-label="Sun Icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 19a1 1 0 0 1 1 1v2a1 1 0 0 1 -2 0v-2a1 1 0 0 1 1 -1m-4.95 -2.05a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1 -1.414 -1.414l1.414 -1.414a1 1 0 0 1 1.414 0m11.314 0l1.414 1.414a1 1 0 0 1 -1.414 1.414l-1.414 -1.414a1 1 0 0 1 1.414 -1.414m-5.049 -9.836a5 5 0 1 1 -2.532 9.674a5 5 0 0 1 2.532 -9.674m-9.315 3.886a1 1 0 0 1 0 2h-2a1 1 0 0 1 0 -2zm18 0a1 1 0 0 1 0 2h-2a1 1 0 0 1 0 -2zm-16.364 -6.778l1.414 1.414a1 1 0 0 1 -1.414 1.414l-1.414 -1.414a1 1 0 0 1 1.414 -1.414m14.142 0a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 0 1 -1.414 -1.414l1.414 -1.414a1 1 0 0 1 1.414 0m-7.778 -3.222a1 1 0 0 1 1 1v2a1 1 0 0 1 -2 0v-2a1 1 0 0 1 1 -1" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="currentColor" className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" aria-label="Moon Icon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 1.992a10 10 0 1 0 9.236 13.838c.341 -.82 -.476 -1.644 -1.298 -1.31a6.5 6.5 0 0 1 -6.864 -10.787l.077 -.08c.551 -.63 .113 -1.653 -.758 -1.653h-.266l-.068 -.006l-.06 -.002z" />
</svg>
<span className="sr-only">Toggle theme</span>
</button>
</div>
</div>
</div>
</footer>