DocsFooter
The compact footer closing a docs page inside the content and rail columns.
View code
<DocsLayout
footer={
<DocsFooter
legal="© 2026 Acme. MIT licensed."
links={[
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
{ label: "Status", href: "/status" },
{ label: "GitHub", href: "https://github.com/acme" },
]}
linksLabel="Site"
>
<p>Written by the Acme team.</p>
</DocsFooter>
}
…
/>Demo docs sites
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- Content docsDriftwood DocsGuides for Driftwood, a command line that deploys static sites: a tutorial, how-to guides and concept pages./demo/docs/driftwood
- Component docsLattice DocsDocs for Lattice UI, a component library: an index of components, each with live previews, props and accessibility notes./demo/docs/lattice
- API referenceParcelo DocsThe HTTP API reference for Parcelo, a shipping-label API: resources, endpoints with request and response fields, and examples in three languages./demo/docs/parcelo
- Utilities docsTempo DocsReference for Tempo, an invented library of CSS utilities: every spacing, colour, layout, type and effect utility drawn beside its call and the CSS it emits./demo/docs/tempo
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { DocsFooter } from "@sdxc/ui/docs";Renders the closing pieces, then the legal line and the links on one row that wraps on a
narrow screen. Pass it as DocsLayout's footer, which confines it to the article and rail.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
children | RemixNode | No | The page's closing pieces, stacked above the link row: a byline, feedback, an edit link. |
legal | RemixNode | No | The copyright or legal line opening the link row, such as "© 2026 Acme". |
links | Link[] | No | Legal and site links, in the order they read. |
linksLabel | string | No | Accessible name of the links' navigation landmark, such as "Site". |
Also accepts everything in Omit<TagProps<"footer">, "children">.