Footer Block
Site footer with link groups, brand and newsletter slots, social icons, legal row and theme toggle slot.
pnpm dlx @glinui/cli@latest add footer-blockInstallation
pnpm dlx @glinui/cli@latest add footer-blockPrefer the package?
Usage
Links render plain anchors; target blank links get `noopener noreferrer` automatically. Columns use logical layout, so RTL flips the order.
Variants
Minimal row and big wordmark.
<FooterBlock layout="minimal" groups={groups} /><FooterBlock layout="big-wordmark" wordmark="Acme" />States
Newsletter and social slots are optional.
<FooterBlock groups={groups} />In a layout
End of a marketing page.
Trusted by builders
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: accessible by default, which saved us a long audit.
Placeholder quote: the tokens made dark mode a one line change.
FAQ
Start today
<FooterBlock groups={groups} />Accessibility
- `footer` landmark.
- Each group is a `nav` labelled by its title.
- Icon only social links require an accessible label.
- Newsletter input has a screen reader label.
Reduced Motion
No animation, only color transitions that are disabled under reduced motion.
Affected properties
link color transitionAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
layout | FooterBlockLayout | No | columns | Footer layout. |
variant | BlockVariant | No | ambient (glinr) | Shell look. `plain` under the minimal style, `glass` is opt-in and needs a backdrop. |
brand / newsletter / social / themeToggle | slots | - | - | Brand node, newsletter config, icon links (label required) and a toggle slot. |
groups | FooterLinkGroup[] | No | [] | Titled link lists, each its own labelled nav. |
copyright / legal | ReactNode / FooterLink[] | - | - | Legal row. |
wordmark | string | No | - | Oversized text for big-wordmark. |
brand | React.ReactNode | No | - | Logo, name and tagline. |
copyright | React.ReactNode | No | - | Copyright line. |
legal | FooterLink[] | No | - | Legal links such as Privacy and Terms. |
newsletter | FooterNewsletter | No | - | Auto-generated from TypeScript source. |
social | FooterSocial[] | No | - | Auto-generated from TypeScript source. |
themeToggle | React.ReactNode | No | - | Slot for a theme toggle. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { FooterBlock } from "@glinui/ui"Dependencies
@glinui/uiGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/footer-block.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
FooterBlockProps
FooterBlockProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
brand | React.ReactNode | No | - | Logo, name and tagline. |
copyright | React.ReactNode | No | - | Copyright line. |
groups | FooterLinkGroup[] | No | [] | - |
layout | FooterBlockLayout | No | "columns" | - |
legal | FooterLink[] | No | - | Legal links such as Privacy and Terms. |
newsletter | FooterNewsletter | No | - | - |
social | FooterSocial[] | No | - | - |
themeToggle | React.ReactNode | No | - | Slot for a theme toggle. |
variant | BlockVariant | No | - | Surface look. Omit to follow the ambient style. `glass` is opt-in and needs a backdrop. |
wordmark | string | No | - | Oversized text for the `big-wordmark` layout. |