Koala UIFooter
A composable site footer for marketing, product and ecommerce pages. Pure layout: a brand column plus grouped link columns up top, and a bottom bar with copyright, legal links and social icons.
Installation#
Usage#
import { GithubLogo, XLogo } from "@phosphor-icons/react"
import {
Footer, FooterTop, FooterBrand, FooterTagline, FooterSocial, FooterSocialLink,
FooterColumns, FooterColumn, FooterLink,
FooterBottom, FooterCopyright, FooterLegal,
} from "@/components/ui/footer"
export function Example() {
return (
<Footer>
<FooterTop>
<FooterBrand>
<span className="text-lg font-semibold">Koala UI</span>
<FooterTagline>Tools for teams that ship every week.</FooterTagline>
<FooterSocial>
<FooterSocialLink href="https://x.com" aria-label="X"><XLogo /></FooterSocialLink>
<FooterSocialLink href="https://github.com" aria-label="GitHub"><GithubLogo /></FooterSocialLink>
</FooterSocial>
</FooterBrand>
<FooterColumns>
<FooterColumn title="Product">
<FooterLink href="/features">Features</FooterLink>
<FooterLink href="/pricing">Pricing</FooterLink>
</FooterColumn>
<FooterColumn title="Company">
<FooterLink href="/about">About</FooterLink>
<FooterLink href="/careers">Careers</FooterLink>
</FooterColumn>
</FooterColumns>
</FooterTop>
<FooterBottom>
<FooterCopyright>© 2026 Koala UI. All rights reserved.</FooterCopyright>
<FooterLegal>
<FooterLink href="/privacy">Privacy</FooterLink>
<FooterLink href="/terms">Terms</FooterLink>
</FooterLegal>
</FooterBottom>
</Footer>
)
}With newsletter#
A newsletter signup is just an Input and a Button composed inside FooterBrand. The footer stays dependency-free.
Wide link grid#
layout="wide" hands the whole top row to the link columns, for footers that lead with a deep sitemap instead of a brand statement. Drop FooterBrand and the columns distribute edge to edge.
Brand above the grid#
The brand does not have to sit beside the columns. Stack FooterTop and the lockup leads the footer with the lede opposite it, the grid runs underneath, and the social row moves down into the bottom bar.
Bottom bar only#
For simple pages, drop the columns and render just the FooterBottom bar: the brand, an inline nav, and the copyright on one line.
Density#
density tunes the block padding and the gap to the bottom bar. Set it per footer or for a whole subtree with DensityProvider. See Density.
API reference#
Footer
The root <footer>. Provides the styling context to every part and renders the max-width gutter. Forwards all <footer> props.
layout:"aside"(default: link columns cluster across the right half, beside the brand) or"wide"(they take the whole row and distribute edge to edge).density:"comfortable"(default) or"compact". Falls back to the nearestDensityProvider.
FooterTop · FooterBrand · FooterTagline
FooterTop lays the brand column beside the link columns; FooterBrand is that column (logo, tagline, social, or a newsletter); FooterTagline is the muted lead line.
FooterColumns · FooterColumn · FooterLink
FooterColumns grids the columns; FooterColumn takes a title and stacks FooterLinks (each accepts asChild for a framework <Link>). A page that is not live yet takes aria-disabled (a <span> through asChild): it keeps its resting ink and stops answering the pointer. Pair it with a small Badge.
FooterSocial · FooterSocialLink
A row of icon-only links. Pass aria-label to each FooterSocialLink. The glyph has no accessible name on its own.
FooterBottom · FooterCopyright · FooterLegal
The lower bar (separated by a hairline), the tabular-nums copyright line, and the inline group for legal/secondary links.