Docs

Progress

A task-completion bar (div-based, so it renders identically across engines; see the CSS component for why not native <progress>).

Colors

primary
secondary
accent
neutral
info
success
warning
error
brand
silica
brand-duck

Sizes

showValue · built-in label row (replaces hand-rolled LabeledRow)

Uploading photo.png0%
Onboarding3 of 4 steps
40%

Real use · task + upload progress

Onboarding · 3 of 4 steps
Uploading photo.png · 0%
Indeterminate (duration unknown)
Interactive · 40%

Using Progress

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 Progress — it needs no JavaScript, so the classes below are the whole story.

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

Root class progress, with 19 modifiers:

  • .progress
  • .progress-accent
  • .progress-bar
  • .progress-error
  • .progress-indeterminate
  • .progress-info
  • .progress-label
  • .progress-label-row
  • .progress-lg
  • .progress-md
  • .progress-neutral
  • .progress-primary
  • .progress-secondary
  • .progress-sm
  • .progress-success
  • .progress-value
  • .progress-warning
  • .progress-wrapper
  • .progress-xl
  • .progress-xs

React

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

npm i @wizeworks/silicaui-react
import { Progress } from "@wizeworks/silicaui-react";

Props

PropTypeRequiredDescription
colorProgressColornoFill color; maps to progress-<color>. Omit for a neutral bar.
sizeProgressSizenoDefault md. Height lines up with same-size fields.
valuenumbernoCurrent value, from 0 to max. Omit entirely for an indeterminate (unknown-duration) loading bar.
maxnumbernoUpper bound of value. Default 100.
showValuebooleannoShow a value label above the bar (skipped while indeterminate). Default false.
formatValue(value: number, max: number) => React.ReactNodenoFormat the label. Default: rounded percentage, e.g. "60%".
labelReact.ReactNodenoOptional leading label shown beside the value, e.g. "Uploading".

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, useEffect } from "react";
import { Progress, Button } from "@wizeworks/silicaui-react";
import { Section, Row, LabeledRow } from "../lib/Section";
import { COLORS, SIZES } from "../lib/data";

export function ProgressDemo() {
    const [pct, setPct] = useState(40);
    const [upload, setUpload] = useState(0);

    useEffect(() => {
        const id = setInterval(
            () => setUpload((p) => (p >= 100 ? 0 : p + 4)),
            180,
        );
        return () => clearInterval(id);
    }, []);

    return (
        <>
            <Section title="Colors">
                <div className="grid max-w-md gap-4">
                    {COLORS.map((color) => (
                        <LabeledRow key={color} label={color}>
                            <Progress color={color} value={65} />
                        </LabeledRow>
                    ))}
                </div>
            </Section>

            <Section title="Sizes">
                <div className="flex max-w-md flex-col gap-2">
                    {SIZES.map((size) => (
                        <Progress key={size} color="primary" size={size} value={60} />
                    ))}
                </div>
            </Section>

            <Section title="showValue · built-in label row (replaces hand-rolled LabeledRow)">
                <div className="grid max-w-md gap-4">
                    <Progress color="brand" value={upload} showValue label="Uploading photo.png" />
                    <Progress color="success" value={3} max={4} showValue formatValue={(v, max) => `${v} of ${max} steps`} label="Onboarding" />
                    <Progress color="warning" value={pct} showValue />
                </div>
            </Section>

            <Section title="Real use · task + upload progress">
                <div className="grid max-w-md gap-4">
                    <LabeledRow label="Onboarding · 3 of 4 steps">
                        <Progress color="success" value={3} max={4} />
                    </LabeledRow>
                    <LabeledRow label={`Uploading photo.png · ${upload}%`}>
                        <Progress color="brand" value={upload} />
                    </LabeledRow>
                    <LabeledRow label="Indeterminate (duration unknown)">
                        <Progress color="primary" />
                    </LabeledRow>
                    <LabeledRow label={`Interactive · ${pct}%`}>
                        <Progress color="warning" value={pct} />
                    </LabeledRow>
                    <Row>
                        <Button
                            size="sm"
                            variant="outline"
                            color="neutral"
                            onClick={() => setPct((p) => Math.max(0, p - 10))}
                        >
                            −10
                        </Button>
                        <Button
                            size="sm"
                            variant="outline"
                            color="neutral"
                            onClick={() => setPct((p) => Math.min(100, p + 10))}
                        >
                            +10
                        </Button>
                    </Row>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Progress — a track div + a fill div whose LITERAL width utility encodes value. 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("Progress", "progress", { /* 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 "progress progress-primary" rather than passing a colour as a prop.

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

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