Steps

A progress tracker. Children are <Step>s; color the ones up to (and including) the current step to show completion.

Colors (completed steps)

Cart
Shipping
Payment
Done

Cart
Shipping
Payment
Done

Cart
Shipping
Payment
Done

Cart
Shipping
Payment
Done

Cart
Shipping
Payment
Done

Cart
Shipping
Payment
Done

Real use · interactive checkout

Cart
Shipping
Payment
Done

Using Steps

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Steps — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class step, with 10 modifiers:

.step
.step-accent
.step-error
.step-info
.step-neutral
.step-primary
.step-secondary
.step-success
.step-warning
.steps
.steps-vertical

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Steps } from "@wizeworks/silicaui-react";

Props

StepsProps

Prop	Type	Required	Description
vertical	boolean	no	Stack the steps down the page instead of across it. Spelled the same as Stats, which has had this since it shipped.

StepProps

Prop	Type	Required	Description
color	StepColor	no	Paints the node + incoming connector; maps to step-<color>.
"data-content"	string	no	Glyph shown in the node instead of its number (e.g. a check).

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { Steps, Step, Button } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";
import { COLORS } from "../lib/data";

const CHECKOUT = ["Cart", "Shipping", "Payment", "Done"];

export function StepsDemo() {
    const [current, setCurrent] = useState(1);

    return (
        <>
            <Section title="Colors (completed steps)">
                <div className="flex flex-col gap-6">
                    {COLORS.slice(0, 6).map((color) => (
                        <Steps key={color}>
                            <Step color={color} data-content="✓">
                                Cart
                            </Step>
                            <Step color={color} data-content="✓">
                                Shipping
                            </Step>
                            <Step color={color}>Payment</Step>
                            <Step>Done</Step>
                        </Steps>
                    ))}
                </div>
            </Section>

            <Section title="Real use · interactive checkout">
                <div className="flex max-w-lg flex-col gap-4">
                    <Steps>
                        {CHECKOUT.map((label, i) => (
                            <Step
                                key={label}
                                color={i <= current ? "primary" : undefined}
                                data-content={i < current ? "✓" : undefined}
                            >
                                {label}
                            </Step>
                        ))}
                    </Steps>
                    <Row>
                        <Button
                            variant="outline"
                            color="neutral"
                            disabled={current === 0}
                            onClick={() => setCurrent((c) => Math.max(0, c - 1))}
                        >
                            Back
                        </Button>
                        <Button
                            color="primary"
                            disabled={current === CHECKOUT.length - 1}
                            onClick={() =>
                                setCurrent((c) => Math.min(CHECKOUT.length - 1, c + 1))
                            }
                        >
                            {current === CHECKOUT.length - 2 ? "Place order" : "Next"}
                        </Button>
                    </Row>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Steps — a <ul class="steps"> tracker; items up to props.current are -primary (read as completed). Both from props. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Steps", "step", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "step step-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Steps, on every path, is available through the Silica MCP server.