ScoreBar

since v0.3.0

Numeric skill score visualized as a colored progress bar.

Intentionally product-bound to the 0–{@link SCORE_MAX} scale. max=1 switches

to percentage display for normalized inputs.

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

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { ScoreBar } from '@hey-mike/tungsten';

import { ScoreBar } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/score-bar/page.tsx

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

export default function ScoreBarSnapshot() {
  return (
    <VariantGrid
      title="ScoreBar"
      hero={
        <div className="w-44">
          <ScoreBar score={3.75} />
        </div>
      }
      variants={[
        { label: '0', node: <ScoreBar score={0} /> },
        { label: '1.25', node: <ScoreBar score={1.25} /> },
        { label: '2.5', node: <ScoreBar score={2.5} /> },
        { label: '3.75', node: <ScoreBar score={3.75} /> },
        { label: '5', node: <ScoreBar score={5} /> },
      ]}
    />
  );
}

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

export default function ScoreBarSnapshot() {
  return (
    <VariantGrid
      title="ScoreBar"
      hero={
        <div className="w-44">
          <ScoreBar score={3.75} />
        </div>
      }
      variants={[
        { label: '0', node: <ScoreBar score={0} /> },
        { label: '1.25', node: <ScoreBar score={1.25} /> },
        { label: '2.5', node: <ScoreBar score={2.5} /> },
        { label: '3.75', node: <ScoreBar score={3.75} /> },
        { label: '5', node: <ScoreBar score={5} /> },
      ]}
    />
  );
}

Props

Surface specific to <ScoreBar />.

Prop	Type	Default	Description
score*	`number`	—	—
max	`number`	`5`	Maximum value of the input scale. Defaults to the product 0–{@link SCORE_MAX} scale.
label	`string`	—	Accessible label override. Falls back to `${value}, ${tierLabel}`.
className	`string`	—	Extra Tailwind classes appended to the root `role="meter"` element.

Used in recipes