Footer

Page footer with dark background, link columns, and a copyright bar.

ExamplesCodeUsageChangelog

Full footer

Brand, three link columns, and a copyright bottom bar.

Acme Corp

Product

• Features
• Pricing
• Changelog
• Roadmap

Company

• About
• Blog
• Careers
• Press

Legal

• Privacy
• Terms
• Cookie Policy

© 2026 Acme Corp. All rights reserved.

Tailwind v4

<Footer brand="Acme Corp">
  <template #links>
    <FooterLinkGroup title="Product">
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Changelog</a></li>
      <li><a href="#">Roadmap</a></li>
    </FooterLinkGroup>
    <FooterLinkGroup title="Company">
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Press</a></li>
    </FooterLinkGroup>
    <FooterLinkGroup title="Legal">
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Cookie Policy</a></li>
    </FooterLinkGroup>
  </template>
  <template #bottom>
    © 2026 Acme Corp. All rights reserved.
  </template>
</Footer>

Custom brand slot

Use #brand to replace the brand text with a logo or custom markup.

◆ JetpackBuilding fast products.

Resources

• Docs
• GitHub

© 2026 Jetpack Labs.

Tailwind v4

<Footer>
  <template #brand>
    <span>◆ Jetpack</span>
    <span>Building fast products.</span>
  </template>
  <template #links>
    <FooterLinkGroup title="Resources">
      <li><a href="#">Docs</a></li>
      <li><a href="#">GitHub</a></li>
    </FooterLinkGroup>
  </template>
  <template #bottom>
    © 2026 Jetpack Labs.
  </template>
</Footer>

Footer Props

Prop	Type	Default	Description
brand	string	—	Brand/logo text displayed in the top-left column

Footer Slots

Slot	Description
brand	Overrides the brand prop; use for logos or multi-line brand copy
links	Column groups of footer links; use FooterLinkGroup
default	Additional custom content in the main footer area
bottom	Content rendered below a divider for copyright or secondary links

FooterLinkGroup Props

Prop	Type	Default	Description
title	string	—	Uppercase column heading label

FooterLinkGroup Slots

Slot	Description
default	List items (<li>) containing <a> anchor tags