Footer Blocks based on shadcn/ui
The footer is the part everyone copies last and gets wrong, columns that do not line up, links that wrap badly, a newsletter box squeezed into a corner. These shadcn/ui footer blocks give you a finished one: organized link columns, social icons, a newsletter field, and the small print, all aligned and responsive.
They are built with shadcn/ui and Tailwind, so they collapse cleanly into a single column on mobile and keep their spacing. Copy the code or run one npx shadcn add command, swap the links and logo, and the bottom of your site is done.
Pick a footer below that matches your site, a simple one-line footer, a multi-column sitemap footer, a footer with a newsletter signup, and start from a version that already looks finished.
Frequently asked questions
Are these footer blocks free?
Yes, the free footers are copy-paste with no account and usable in commercial projects. A couple of larger ones are PRO and labelled.
Can I change the columns and links?
Yes. The link groups are in the component, so you rename the columns, swap the links to your routes, and add or remove a column with Tailwind handling the layout.
Does the newsletter input work?
The field and button are built and styled. They are standard elements, so you connect them to your email provider or form handler to make the signup live.
How do I add a footer to my project?
Copy the code into your layout, or run the npx shadcn add command on the block. It drops in as an editable component you can reuse across pages.
Do they work with Next.js?
Yes, they are React components for Next.js and Tailwind, and they sit naturally in an App Router layout. They also work in any React setup with shadcn/ui installed.