Footer
A responsive footer component with multiple columns, social media links, and app store buttons
Preview
Interactive footer component demo
📦 Installation
pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-footer.json
💡 Usage Example
import Footer from "@/components/zezo/footer/footer";
import { Globe, Instagram, Twitter } from "lucide-react";
<Footer
columnOne={{
title: "Company",
links: [
{ name: "About Us", href: "#" },
{ name: "Careers", href: "#" }
]
}}
columnTwo={{
title: "Support",
links: [
{ name: "Help Center", href: "#" },
{ name: "Privacy Policy", href: "#" }
]
}}
columnThree={{
title: "Legal",
links: [
{ name: "Terms", href: "#" }
]
}}
socialMedia={{
title: "Follow Us",
links: [
{ icon: <Globe className="w-5 h-5" />, href: "#", label: "Website" },
{ icon: <Twitter className="w-5 h-5" />, href: "#", label: "Twitter" }
]
}}
logoUrl="/logo.webp"
copyright="Zezo Inc."
googlePlayUrl="#" // optional
appStoreUrl="#" // optional
/>📘 Props
| Prop | Type | Required | Description |
|---|---|---|---|
| columnOne | object | Yes | First column with title and links array |
| columnTwo | object | Yes | Second column with title and links array |
| columnThree | object | No | Optional third column |
| columnFour | object | No | Optional fourth column |
| socialMedia | object | Yes | Social media links with icons |
| logoUrl | string | Yes | Logo image URL |
| copyright | string | Yes | Copyright text |
| googlePlayUrl | string | No | Google Play Store app link |
| appStoreUrl | string | No | Apple App Store app link |
✨ Features
🎨 Dark Mode
Automatic theme with gradient background
📱 Responsive
Adaptive grid layout
🔗 Flexible Columns
2-4 columns support
📱 App Store Links
Google Play & App Store badges
