Shadcn.io is not affiliated with official shadcn/ui
Animated Links Footer Block
An animated links React footer block for Next.js with three navigation columns where each link reveals an ArrowRightIcon and slides right on hover built with shadcn/ui and Tailwind CSS
Make navigation feel alive. This React and Next.js footer block features three link columns where every link responds to hover with a subtle rightward translation and an ArrowRightIcon that fades in from the left. The effect is smooth and interactive without being distracting — a micro-interaction that signals clickability and rewards exploration. Built with TypeScript, framer-motion entrance animations, react-wrap-balancer, Lucide React icons, and Tailwind CSS transitions. A brand tagline and copyright row anchor the layout. Perfect for developer portfolios, design studios, creative agencies, and product sites where attention to interaction detail reflects the quality of the product itself.
Animated Links Footer Block preview
Installation
Related Components
Footer Columns
Multi-column link footer
Footer Links
Navigation link footer
Footer Split Brand
Split layout footer with brand
Footer Dark
Dark-themed footer
Footer Minimal
Compact minimal footer
Footer Developer Hub
Developer-focused footer
FAQ
Was this page helpful?
Sign in to leave feedback.
Agency Footer Block
An agency and studio footer block for React and Next.js with a work-together CTA, monospace email, two navigation columns, social icons, and copyright bar built with shadcn/ui and Tailwind CSS
API Status Footer Block
A React API status footer block for Next.js with service health indicators, operational status dots, subscribe to updates link, and navigation columns using shadcn/ui and Tailwind CSS