TableOfContents
Island.
Install the CLI
Install the command line with your package manager. It needs Node 22 or later and runs on macOS, Linux and Windows.
Log in
Run the login command and approve the request in your browser. The CLI stores a session for this machine only.
Use a token in CI
On a CI runner there is no browser, so create an access token in Settings and expose it as an environment variable.
Add a monitor
Point a monitor at the URL you care about. The first check runs from three regions within a minute.
Next steps
Choose who gets alerted, then publish a status page so customers see what you see.
View code
<TableOfContents
label="On this page"
items={[
{ id: "install", text: "Install the CLI", level: 2 },
{ id: "login", text: "Log in", level: 2 },
{ id: "token", text: "Use a token in CI", level: 3 },
{ id: "monitor", text: "Add a monitor", level: 2 },
{ id: "next", text: "Next steps", level: 2 },
]}
/>
{/* Below the rail width, fold it into the sticky bar */}
<TableOfContents label="On this page" items={items} layout="bar" />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 { TableOfContents } from "@sdxc/ui/docs";Renders the in-page navigation, or nothing when the page has fewer than minItems
headings. Load @sdxc/ui/docs/table-of-contents in the browser entry. Headings that the
page's layout gives a scroll-margin-top set the line a section is read from.
Examples
<TableOfContents items={anchors} label="On this page" layout="bar" />Props
Read from the component's own types, so every prop, every default and every allowed value is listed.