Shadcn.io is not affiliated with official shadcn/ui
Footer Split Dark Light
A React split theme footer block for Next.js with dark brand section, light link columns, visual contrast grid layout, and copyright bar built with shadcn/ui and Tailwind CSS
Create visual drama with this React and Next.js split theme footer block. The left half uses a dark bg-zinc-950 background with zinc-100 text for the brand section including company name, tagline, and description. The right half stays on the default bg-card background with standard text for two organized link columns. This visual contrast split creates a striking footer that separates brand identity from functional navigation. Built with TypeScript, framer-motion staggered entrance animations, react-wrap-balancer for text wrapping, and Tailwind CSS grid. Perfect for creative agencies, design studios, portfolio sites, and modern SaaS products where the footer design should feel intentional and distinctive.
Related Components
Dark Footer
Fully dark-themed footer
Split Brand Footer
Split brand layout footer
Company Footer
Footer with brand story
Multi-Column Footer
Footer with four link columns
Newsletter Footer
Footer with email signup
Mega Footer
Comprehensive enterprise footer
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Brand
A split brand React footer block for Next.js with large brand section, tagline, CTA button, and three link columns in a grid layout built with shadcn/ui components and Tailwind CSS
Stacked Minimal
A stacked minimal React footer block for Next.js with three horizontal rows for brand, social icons, language selector, and copyright built with shadcn/ui components and Tailwind CSS