Footer Sections

Footers close out every page with navigation, legal links, and ways to stay connected. These components range from a single-row simple footer to a full multi-column footer with a newsletter signup.

Component Variants

Usage

import {
  FooterSimple,
  FooterMultiColumn,
  FooterWithNewsletter,
  FooterCentered,
  FooterMinimal,
} from '@/components/ui/footers';

// Footer Simple
<FooterSimple
  logo={<Logo />}
  links={[
    { label: 'Product', href: '/product' },
    { label: 'Contact', href: '/contact' },
  ]}
  copyright="© 2026 Acme, Inc. All rights reserved."
/>

// Footer Multi-Column
<FooterMultiColumn
  logo={<Logo />}
  description="Beautiful, accessible UI components for modern TypeScript applications."
  columns={[
    { title: 'Product', links: [{ label: 'Features', href: '/features' }] },
    { title: 'Company', links: [{ label: 'About', href: '/about' }] },
  ]}
  social={[{ name: 'GitHub', href: 'https://github.com', icon: <GithubIcon /> }]}
  copyright="© 2026 Acme, Inc. All rights reserved."
/>

// Footer With Newsletter
<FooterWithNewsletter
  logo={<Logo />}
  columns={[{ title: 'Resources', links: [{ label: 'Docs', href: '/docs' }] }]}
  social={[{ name: 'Twitter', href: 'https://twitter.com', icon: <TwitterIcon /> }]}
  onSubscribe={(email) => console.log(email)}
  copyright="© 2026 Acme, Inc. All rights reserved."
/>

// Footer Centered
<FooterCentered
  logo={<Logo />}
  links={[{ label: 'Docs', href: '/docs' }]}
  social={[{ name: 'GitHub', href: 'https://github.com', icon: <GithubIcon /> }]}
  copyright="© 2026 Acme, Inc. All rights reserved."
/>

// Footer Minimal
<FooterMinimal
  copyright="© 2026 Acme, Inc."
  links={[
    { label: 'Privacy', href: '/privacy' },
    { label: 'Terms', href: '/terms' },
  ]}
/>

Props Reference

FooterSimple

FooterMultiColumn

FooterWithNewsletter

FooterCentered

FooterMinimal