Shadcn.io is not affiliated with official shadcn/ui
Theme Toggle Footer Block
A React theme toggle footer block for Next.js with dark mode sun/moon icon switcher, three link columns, and copyright bar using shadcn/ui and Tailwind CSS
Give users dark mode control right from the footer. This React footer features a sun and moon toggle button with animated icon swap for switching between light and dark themes. Three organized link columns cover product, developer, and company navigation. A copyright bar anchors the bottom. Built with shadcn/ui Button components, framer-motion entrance and icon transition animations, react-wrap-balancer for balanced typography, and Tailwind CSS. Ideal for developer tool sites, documentation platforms, SaaS dashboards, and any product where theme preference matters and users expect quick access to display settings.
Theme Toggle Footer Block preview
Installation
Related Components
Dark Footer
Dark-themed footer block
Minimal Footer
Clean minimal footer
Multi-Column Footer
Footer with multiple link columns
CTA Footer
Footer with call-to-action banner
Developer Hub Footer
Footer for developer tools
Simple Footer
Basic footer layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Testimonial Footer Block
A testimonial footer block for React and Next.js with a featured italic quote, author attribution, two navigation link columns, and copyright text built with shadcn/ui and Tailwind CSS
Three Row Footer Block
A three-row footer block for React and Next.js with a four-column link grid, centered newsletter signup form, and copyright bar with social icons built with shadcn/ui and Tailwind CSS