Shadcn.io is not affiliated with official shadcn/ui
Back to Top Footer Block
A React back-to-top footer block for Next.js with smooth scroll button, three link columns, and copyright bar using shadcn/ui and Tailwind CSS
Let readers jump back to the start without reaching for the scrollbar. This React footer opens with a centered "Back to top" button featuring an ArrowUpIcon that smoothly scrolls to the page top on click. Below, three organized link columns cover product, resources, and company navigation. A copyright bar anchors the bottom. Built with shadcn/ui Button components, framer-motion entrance animations, react-wrap-balancer for balanced typography, and Tailwind CSS. Ideal for long-form content pages, documentation sites, blog archives, and e-commerce category pages where users scroll deep and need a fast return to navigation.
Back to Top Footer Block preview
Installation
Related Components
CTA Footer
Footer with call-to-action banner
Minimal Footer
Clean minimal footer
Multi-Column Footer
Footer with multiple link columns
Simple Footer
Basic footer layout
Company Footer
Footer with brand story
Newsletter Footer
Footer with email signup
FAQ
Was this page helpful?
Sign in to leave feedback.
Awards Footer Block
A React awards and recognition footer block for Next.js with award badges, industry accolades, three navigation columns, and copyright using shadcn/ui and Tailwind CSS
Badge Row Footer Block
A React badge row footer block for Next.js with trust and technology chip indicators, two link columns, and copyright using shadcn/ui and Tailwind CSS