Steps
Numbered steps for a docs procedure.
Add a monitor
Paste the URL you want watched and pick how often it is checked.
Choose who gets alerted
Route alerts to a person, a rotation or a Slack channel.
Send a test alert
curl -X POST https://api.example.com/monitors/checkout/test
View code
<Steps>
<Steps.Item id="add-a-monitor" title="Add a monitor">
<p>Paste the URL you want watched and pick how often it is checked.</p>
</Steps.Item>
<Steps.Item id="choose-who-gets-alerted" title="Choose who gets alerted">
<p>Route alerts to a person, a rotation or a Slack channel.</p>
</Steps.Item>
<Steps.Item id="send-a-test-alert" title="Send a test alert">
<pre><code>curl -X POST https://api.example.com/monitors/checkout/test</code></pre>
</Steps.Item>
</Steps>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 { Steps } from "@sdxc/ui/docs";Renders the ordered list and the heading scope its titles read. Each step pads its own end instead of the list using a gap, so the rail spans the whole distance between one counter and the next.
Composition
The parts the component publishes, each a static property of the host.
StepsSteps.ItemOne step: the counter and rail in the inline-start gutter, the title heading beside the counter, and the step's content under the title.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
level | HeadingLevel | No | Heading depth of every step title. Defaults to one level past the nearest HeadingScope, or 2 where no scope wraps the list. |
children | RemixNode | Yes | Steps.Item children, numbered in order by CSS counters. |
Also accepts everything in TagProps<"ol">.
Steps.Item
| Prop | Type | Required | Description |
|---|---|---|---|
title | RemixNode | Yes | What the reader does in this step, rendered as a heading. |
id | string | No | Id on the title heading, so a table of contents or a link can target the step. |
children | RemixNode | No | Instructions, commands and code for the step. |
Also accepts everything in Omit<TagProps<"li">, "title" | "id">.