Shadcn.io is not affiliated with official shadcn/ui
Footer Gradient Border
A React gradient border footer block for Next.js with top border accent, brand section, three link columns, and copyright bar built with shadcn/ui and Tailwind CSS
Add a subtle visual accent to your footer with this React and Next.js gradient border footer block. Features the same bordered card pattern with a distinct top border accent using border-t-2 border-t-foreground that creates visual separation from the content above. Inside, a brand section with company name and tagline sits above three organized navigation link columns and a copyright bar. Built with TypeScript, framer-motion entrance animations, react-wrap-balancer for text wrapping, and Tailwind CSS. Perfect for portfolios, design studios, SaaS products, and any site where a subtle accent line adds polish without breaking the minimal aesthetic.
Related Components
Dark Footer
Dark-themed footer block
Company Footer
Footer with brand story and links
Multi-Column Footer
Footer with four link columns
Split Brand Footer
Footer with split brand layout
Simple Footer
Simple footer with social links
Mega Footer
Comprehensive enterprise footer
FAQ
Was this page helpful?
Sign in to leave feedback.
Government
A government and civic organization footer block for React and Next.js with official banner, three navigation columns, accessibility compliance note, and copyright bar built with shadcn/ui and Tailwind CSS
Healthcare
A React healthcare footer block for Next.js with HIPAA compliance badge, three navigation columns, emergency contact notice, and copyright using shadcn/ui and Tailwind CSS