Footer

Page footer with grid layout, brand section, social links, newsletter, and bottom bar. Supports full, compact, branded, centered, and dark variants.

Import

import {
  Footer,
  FooterGrid,
  FooterSection,
  FooterHeading,
  FooterLink,
  FooterBrand,
  FooterSocials,
  FooterSocialLink,
  FooterBottom,
  FooterBottomLinks,
  FooterNewsletter,
  FooterDivider,
} from "poyraz-ui/organisms";

Full Footer

Multi-column footer with brand, links, socials, and bottom bar.

<Footer>
  <FooterGrid>
    <FooterSection>
      <FooterBrand>Poyraz UI</FooterBrand>
      <p className="text-sm text-slate-500">
        A brutalist component library for modern web apps.
      </p>
      <FooterSocials>
        <FooterSocialLink href="#" aria-label="GitHub">
          <Github className="h-4 w-4" />
        </FooterSocialLink>
        <FooterSocialLink href="#" aria-label="Twitter">
          <Twitter className="h-4 w-4" />
        </FooterSocialLink>
      </FooterSocials>
    </FooterSection>
    ...columns
  </FooterGrid>
  <FooterBottom>
    <span>© 2025 Poyraz UI.</span>
    <FooterBottomLinks>
      <FooterLink href="#">Privacy</FooterLink>
      <FooterLink href="#">Terms</FooterLink>
    </FooterBottomLinks>
  </FooterBottom>
</Footer>

With Newsletter

Footer with an embedded newsletter subscription form.

<Footer>
  <FooterNewsletter
    heading="Stay in the loop"
    description="Subscribe for updates, tips, and new releases."
    onSubscribe={(email) => console.log(email)}
  />
  <FooterDivider />
  <FooterGrid>…</FooterGrid>
  <FooterBottom>…</FooterBottom>
</Footer>

Dark Variant

Dark-themed footer for contrast sections.

<Footer variant="dark">
  <FooterGrid>…</FooterGrid>
  <FooterBottom>…</FooterBottom>
</Footer>

Centered Variant

Centered footer for minimal pages.

<Footer variant="centered">
  <div className="space-y-4">
    <span className="text-lg font-bold">Poyraz UI</span>
    <p>Brutalist components for React.</p>
    <FooterSocials className="justify-center">…</FooterSocials>
  </div>
  <FooterBottom className="justify-center">…</FooterBottom>
</Footer>

Compact Footer

Minimal single-line footer.

<Footer variant="compact">
  <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
    <span className="text-sm text-slate-500">© 2025 Poyraz UI</span>
    <FooterBottomLinks>
      <FooterLink href="#">Privacy</FooterLink>
      <FooterLink href="#">Terms</FooterLink>
    </FooterBottomLinks>
  </div>
</Footer>