DocsLayout
The shell a docs page composes into.
View code
<DocsLayout
sidebar={<DocsNav tree={tree} activePath={url.pathname} />}
toc={anchors}
tocLabel="On this page"
menuLabel="Menu"
drawerLabel="Documentation"
closeLabel="Close menu"
header={<SiteHeader … />}
stickyTop="4rem"
>
<h1>Install the CLI</h1>
…
</DocsLayout>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 { DocsLayout } from "@sdxc/ui/docs";Renders the three columns and their narrow-screen fallbacks. Load
@sdxc/ui/docs/table-of-contents and @sdxc/ui/dialog-dismiss in the browser entry. Headings
with an id in the article get a scroll-margin-top that clears the sticky chrome, and
--ui-docs-scroll-margin carries the same offset for anything else jumped to.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
sidebar | RemixNode | Yes | The tree to read through, usually a DocsNav; drawn docked and again in the drawer. |
children | RemixNode | Yes | The article: a page header, the prose, then its pager and next steps. |
toc | TableOfContents.Item[] | No | The page's own headings; fewer than tocMinItems draw neither rail nor bar list. |
tocLabel | string | Yes | "On this page", for the rail's heading and the bar. |
tocMinItems | number | No | |
menuLabel | string | Yes | The bar button that opens the drawer below the dock width ("Menu"). |
drawerLabel | string | Yes | The drawer's heading and accessible name ("Documentation"). |
closeLabel | string | Yes | The drawer's close button's accessible name ("Close menu"). |
railFooter | RemixNode | No | Drawn under the headings in the rail, such as feedback or an edit link. |
footer | RemixNode | No | Closes the page across the article and rail columns, never under the sidebar, so the docked sidebar runs to the viewport's foot; usually a DocsFooter. |
header | RemixNode | No | A site header drawn above the shell, kept on screen as the page scrolls. |
stickyTop | string | No | The height of everything kept on screen above the shell (the header slot, or a site header the app draws around the layout), so sticky columns and jumped-to headings sit below it. |
dock | Dock | No | |
measure | string | No | The article column's widest extent, which code, images, tables and charts may fill. |
proseMeasure | string | No | The widest line of running text: paragraphs, lists, headings, quotes and callouts stop here while wider blocks keep growing to measure. Readable prose sits at 60–75ch. |
maxWidth | string | No | The whole shell's widest extent. @default "88rem" |
main | boolean | No | Whether the article column is the page's <main> landmark; pass false when the app's own layout already draws one around the shell. |
drawerId | string | No | Shared by the drawer and the button that opens it. @default "docs-drawer" |