Multi-Column Footer

Classic footer with brand column, link columns, social icons with hover animations, and a bottom copyright bar.

footerlinkssocialcolumns

Installation

bash

# Copy multi-column-footer.tsx to your project
cp components/ui/multi-column-footer.tsx your-project/components/ui/multi-column-footer.tsx

How to use

tsx

import { MultiColumnFooter } from "@/components/ui/multi-column-footer";

tsx

<MultiColumnFooter
  logo="Acme"
  description="Building the future of software."
  columns={[
    { title: "Product", links: [{label: "Features", href: "#"}, {label: "Pricing", href: "#"}] },
    { title: "Company", links: [{label: "About", href: "#"}, {label: "Careers", href: "#"}] },
  ]}
/>

Dependencies

framer-motion

Exports

MultiColumnFooter

File

components/ui/multi-column-footer.tsx

Preview