SiteFooter

Brand, link columns and a legal bar.

Preview

src/examples/site-footer/example.astro

---
import { SiteFooter } from "@/presentation/components/site/site-footer";
---

<SiteFooter
  name="widget"
  description="A widget that does widget things."
  command="npm install @demo/widget"
  license="MIT"
  version={{ label: "v1.2.3", href: "#" }}
  credit={{ prefix: "Built with", label: "docs-sitekit", href: "https://miguelcolmenares.com/docs-sitekit/" }}
  columns={[
    {
      title: "Documentation",
      links: [
        { label: "Docs", href: "#" },
        { label: "Examples", href: "#" },
      ],
    },
    {
      title: "Project",
      links: [
        { label: "GitHub", href: "https://github.com/demo/widget", external: true, icon: "brand:github" },
        { label: "Report an issue", href: "https://github.com/demo/widget/issues", external: true },
      ],
    },
  ]}
/>

Add to your site

npx docs-sitekit add site-footer

It writes these files, and keeps a file you changed:

src/presentation/components/site/site-footer.tsx

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of SiteFooter
Key	Type	Default	Allowed values	Description
`name`	string	required	-	The name of the site, in the brand and in the legal line.
`description`	string	-	-	One sentence under the brand.
`command`	string	-	-	A command shown under the description.
`columns`	readonly FooterColumn[]	required	-	The link columns, one grid track each.
`license`	string	-	-	The license, after the name in the legal line.
`version`	{ label: string; href?: string; }	-	-	Shown after the license, linked when href is given.
`credit`	{ prefix: string; label: string; href: string; }	-	-	A credit at the right of the legal line.

Fields of FooterColumn
Key	Type	Default	Allowed values	Description
`title`	string	required	-	The heading of the column, and the name of its navigation.
`links`	readonly { label: string; href: string; external?: boolean; icon?: string; }[]	required	-	The links. icon is a lucide name or brand:<slug>, drawn before the label, and external opens the link in a new tab.

Variants and states

Without columns

The brand and the legal line, for a site with one page.

src/examples/site-footer/minimal.astro

---
import { SiteFooter } from "@/presentation/components/site/site-footer";
---

<SiteFooter name="widget" columns={[]} license="MIT" />

About

The footer of every page: the brand with a sentence and a command, one column of links for each group, and a legal line with the license, the version and a credit. The columns have explicit tracks, so they sit side by side from the md width and stack under it.

Accessibility

It is the <footer> of the page, which is a landmark.
Each column is a <nav> named by its title, which is also its h2.
A link is 44 px high on a phone and 32 px from the md width.
An external link opens in a new tab with rel="noopener noreferrer" and shows an arrow that is aria-hidden. The arrow is the only sign of the new tab, so the link does not say it.
A brand logo before a link is decorative.

Source

site-footer.tsx

Edit this page

Last updated 5 November 2026