Steps
A numbered procedure in a document, each step with its own heading and content, joined by a line.
Steps lays out a procedure in a document: install this, then configure that. Each Step has a
numbered marker, a line to the next step, and your own heading and content. The
Getting started page of this site uses it. For the
progress of a flow with a current step, use a Stepper.
Receive the package
Take the archive from the release and check its checksum.
Install it
Add it to your workspace and install the dependencies.
Import the styles
Import the package stylesheet once, in your root layout.
// apps/docs/examples/ui/steps.tsximport {Step, Steps} from '@workspace/active-ui/components/composed/steps';
/** * A procedure in a document: numbered steps with their own heading and * content. The number comes from the list; the marker repeats it. */export default function StepsExample() { return ( <Steps className="w-full max-w-xl text-sm"> <Step> <h3 className="mb-1 font-medium">Receive the package</h3> <p className="text-muted-foreground"> Take the archive from the release and check its checksum. </p> </Step> <Step> <h3 className="mb-1 font-medium">Install it</h3> <p className="text-muted-foreground"> Add it to your workspace and install the dependencies. </p> </Step> <Step> <h3 className="mb-1 font-medium">Import the styles</h3> <p className="text-muted-foreground"> Import the package stylesheet once, in your root layout. </p> </Step> </Steps> );}What the composition adds#
A real ordered list: an
<ol>with an<li>per step, so the number is in the list. The visible marker is a CSS counter, hidden from assistive technology.Your heading at the level your page needs; the first child of a step loses its top margin, so the heading lines up with the marker, in running text too.
The marker has the shape of the Stepper's, so both read as one family; it mirrors in a right-to-left layout.
Usage#
import {Step, Steps} from '@workspace/active-ui/components/composed/steps';
<Steps> <Step> <h2>Receive the package</h2> <p>…</p> </Step> <Step> <h2>Install it</h2> <p>…</p> </Step></Steps>;API#
Parts that take only their element’s attributes
Steps: the attributes of a<ol>, with className and ref.Step: the attributes of a<li>, with className and ref.