Koala UIFooter
ProA 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#
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
Anatomy#
import {
Footer, FooterTop, FooterBrand, FooterTagline, FooterSocial, FooterSocialLink,
FooterColumns, FooterColumn, FooterLink,
FooterBottom, FooterCopyright, FooterLegal,
} from "@/components/ui/footer"
<Footer>
<FooterTop>
<FooterBrand>
<FooterTagline />
<FooterSocial>
<FooterSocialLink />
</FooterSocial>
</FooterBrand>
<FooterColumns>
<FooterColumn>
<FooterLink />
</FooterColumn>
</FooterColumns>
</FooterTop>
<FooterBottom>
<FooterCopyright />
<FooterLegal>
<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 inside. Forwards all native <footer> props; every part accepts className, merged last.
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "aside" | "wide" | "aside" | aside clusters the link columns across the right band beside the brand; wide gives them the whole row, edge to edge. |
| density | "comfortable" | "compact" | "compact" | Block padding and the gap to the bottom bar. Falls back to the nearest DensityProvider. |
FooterTop
The upper region: lays the brand column beside the link columns, stacked below lg. Forwards all native <div> props.
FooterBrand
The brand column: logo, tagline, social row or a newsletter form. Forwards all native <div> props.
FooterTagline
The muted lead line under the brand mark. Forwards all native <p> props.
FooterColumns
Grids the link columns: 2 or 3 up on small screens (4 up when there are exactly four), one row from lg. Forwards all native <div> props.
FooterColumn
A titled column of links. Forwards all native <div> props except title.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | - | Heading rendered as an <h3> above the links. Omit it for an untitled column. |
FooterLink
A muted text link for columns and the legal row. Renders an <a> and forwards all its props; with aria-disabled (a page not live yet) it keeps its resting ink and ignores the pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge onto your own element, a framework <Link> or a <span> for a disabled entry, instead of rendering an <a>. |
FooterSocial
A row of social icon links. Forwards all native <div> props.
FooterSocialLink
An icon-only ghost link with a 40px hit area. Renders an <a> and forwards all its props; pass aria-label, since the glyph has no accessible name.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge onto your own element, e.g. a framework <Link>, instead of rendering an <a>. |
FooterBottom
The lower bar under a hairline: copyright on one side, legal links or social on the other. Forwards all native <div> props.
FooterCopyright
The muted copyright line, set in tabular-nums. Forwards all native <p> props.
FooterLegal
An inline, wrapping group for legal and secondary links in the bottom bar. Forwards all native <div> props.