Skip to content
LuoForge/Tungsten
Components/Progress·

Progress

since v4.3.0

Generic horizontal progress bar primitive. Renders a track with a colored

fill that animates from old value to new on value change.

Use this for completion-percentage displays (file upload, sync, study

plan, etc.). For domain-bound numeric scores in the product's 0–5 scale,

use {@link ScoreBar } instead — it carries the tier-color logic.

Forwards ref to the root <div role="progressbar">.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { Progress } from '@hey-mike/tungsten';
import { Progress } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/progress/page.tsx

import { Progress } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function ProgressSnapshot() {
  return (
    <VariantGrid
      title="Progress"
      hero={
        <div className="w-48">
          <Progress value={60} aria-label="60%" />
        </div>
      }
      variants={[
        {
          label: 'values',
          node: (
            <div className="flex w-48 flex-col gap-3">
              <Progress value={0} aria-label="0%" />
              <Progress value={25} aria-label="25%" />
              <Progress value={50} aria-label="50%" />
              <Progress value={75} aria-label="75%" />
              <Progress value={100} aria-label="100%" />
            </div>
          ),
        },
        {
          label: 'colors',
          node: (
            <div className="flex w-48 flex-col gap-3">
              <Progress value={60} color="brand" aria-label="brand 60%" />
              <Progress value={60} color="success" aria-label="success 60%" />
              <Progress value={60} color="warning" aria-label="warning 60%" />
              <Progress value={60} color="error" aria-label="error 60%" />
              <Progress value={60} color="info" aria-label="info 60%" />
            </div>
          ),
        },
      ]}
    />
  );
}

import { Progress } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function ProgressSnapshot() {
  return (
    <VariantGrid
      title="Progress"
      hero={
        <div className="w-48">
          <Progress value={60} aria-label="60%" />
        </div>
      }
      variants={[
        {
          label: 'values',
          node: (
            <div className="flex w-48 flex-col gap-3">
              <Progress value={0} aria-label="0%" />
              <Progress value={25} aria-label="25%" />
              <Progress value={50} aria-label="50%" />
              <Progress value={75} aria-label="75%" />
              <Progress value={100} aria-label="100%" />
            </div>
          ),
        },
        {
          label: 'colors',
          node: (
            <div className="flex w-48 flex-col gap-3">
              <Progress value={60} color="brand" aria-label="brand 60%" />
              <Progress value={60} color="success" aria-label="success 60%" />
              <Progress value={60} color="warning" aria-label="warning 60%" />
              <Progress value={60} color="error" aria-label="error 60%" />
              <Progress value={60} color="info" aria-label="info 60%" />
            </div>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <Progress />.

PropTypeDefaultDescription
value*number—Completion percentage, 0–100. Values outside the range are clamped.
color"brand" | "success" | "warning" | "error" | "info"brandFill color via semantic token. Defaults to brand.
classNamestring—Extra Tailwind classes appended to the root role="progressbar" element.
aria-labelstring——
aria-labelledbystring——

Source