Footer

Page footer with grid layout, brand section, social links, newsletter, CTA banner, app download badges, inline link groups, and bottom bar. Supports full, compact, branded, centered, and minimal variants.

Import

import {
  Footer, FooterGrid, FooterSection, FooterHeading,
  FooterLink, FooterBrand, FooterSocials, FooterSocialLink,
  FooterBottom, FooterBottomLinks, FooterNewsletter,
  FooterDivider, FooterDescription, FooterBadge,
  FooterLinkGroup, FooterCTA, FooterApp, FooterAppLink,
} 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 minimal 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>© 2026 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>

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>Minimal 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">© 2026 Poyraz UI</span>
    <FooterBottomLinks>
      <FooterLink href="#">Privacy</FooterLink>
      <FooterLink href="#">Terms</FooterLink>
    </FooterBottomLinks>
  </div>
</Footer>

Minimal Variant

Clean single-row footer with brand, inline links, and socials.

<Footer variant="minimal">
  <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
    <div className="flex items-center gap-3">
      <Logo width={20} height={20} />
      <span className="text-sm font-semibold">Poyraz UI</span>
    </div>
    <FooterLinkGroup>
      <FooterLink href="#">Docs</FooterLink>
      <FooterLink href="#">Components</FooterLink>
      <FooterLink href="#">GitHub</FooterLink>
    </FooterLinkGroup>
    <FooterSocials>
      <FooterSocialLink href="#" aria-label="GitHub">
        <Github className="h-4 w-4" />
      </FooterSocialLink>
    </FooterSocials>
  </div>
</Footer>

With CTA Banner

Footer with a call-to-action banner including heading, description, and action buttons.

<Footer>
  <FooterCTA
    heading="Ready to get started?"
    description="Take the first step towards building beautiful interfaces."
  >
    <Button variant="outline" size="sm">View Docs</Button>
    <Button size="sm">Get Started</Button>
  </FooterCTA>
  <FooterDivider />
  <FooterGrid>…</FooterGrid>
  <FooterBottom>…</FooterBottom>
</Footer>

With App Download

Footer with app store download badges for mobile-first products.

<FooterApp>
  <FooterAppLink href="#">
    <Apple className="h-4 w-4" />
    <div>
      <div className="text-[9px] text-slate-400">Download on the</div>
      <div className="text-xs font-semibold">App Store</div>
    </div>
  </FooterAppLink>
  <FooterAppLink href="#">
    <Smartphone className="h-4 w-4" />
    <div>
      <div className="text-[9px] text-slate-400">Get it on</div>
      <div className="text-xs font-semibold">Google Play</div>
    </div>
  </FooterAppLink>
</FooterApp>

Branded with Badge & Description

Branded footer with FooterDescription and FooterBadge for version tags.

<FooterBrand>
  <div className="flex items-center gap-2">
    <Logo width={24} height={24} />
    <span className="text-lg font-bold">Poyraz UI</span>
    <FooterBadge>v1.0</FooterBadge>
  </div>
  <FooterDescription>
    Build beautiful, accessible interfaces.
  </FooterDescription>
</FooterBrand>

Horizontal Link Group

Footer with FooterLinkGroup for inline horizontal links instead of grid columns.

<Footer variant="minimal">
  <FooterLinkGroup>
    <FooterLink href="#">Home</FooterLink>
    <FooterLink href="#">Docs</FooterLink>
    <FooterLink href="#">Components</FooterLink>
    <FooterLink href="#">Blog</FooterLink>
    <FooterLink href="#">GitHub</FooterLink>
  </FooterLinkGroup>
</Footer>