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

PropTypeRequiredDescription
columnOneobjectYesFirst column with title and links array
columnTwoobjectYesSecond column with title and links array
columnThreeobjectNoOptional third column
columnFourobjectNoOptional fourth column
socialMediaobjectYesSocial media links with icons
logoUrlstringYesLogo image URL
copyrightstringYesCopyright text
googlePlayUrlstringNoGoogle Play Store app link
appStoreUrlstringNoApple 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