Duck Site Footer
The bottom of a content site: identity and one sentence, link columns, a hairline, the small print.
BlockServer safe
Preview
Installation
One command writes the section and every component it renders.
$
pnpm dlx shadcn@latest add @duck/duck-site-footerThe block lands in components/blocks/duck-site-footer.tsx. It builds on , which the CLI installs alongside it. Already installed items are skipped.
Usage
import { DuckSiteFooter } from "@/components/blocks/duck-site-footer"A block is a starting point, not a widget. The props exist so the example renders with real content — once the file is in your project, hard-code what never changes and delete the rest.
Props
Everything not listed here is forwarded to the root element.
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | React.ReactNode | - | Mark, wordmark or site name. |
| description | React.ReactNode | - | One sentence. Not a mission statement. |
| columns | DuckSiteFooterColumn[] | - | title plus links of label, href, external. Each column renders as its own navigation landmark. |
| note | React.ReactNode | - | Bottom left: copyright, credit, a build note. |
| legal | DuckSiteFooterLink[] | - | Bottom right: privacy, terms, licence. |
| headingLevel | "h2" | "h3" | "p" | "h2" | Column heading element. Drop it to p if the page already spends its heading levels. |
| render | (link, className) => React.ReactNode | - | Framework link, as on the header. |
Rules
What keeps this section from turning into noise.
- Each column is a nav named by its own heading, because a footer is a navigation landmark and that is what a screen reader lands in it looking for.
- Three or four columns. A footer with nine is a sitemap, and a sitemap belongs on its own page.