Component

Mastery Bar

A persistent, labelled linear progress bar for visualising skill or concept mastery — distinct from an activity spinner or loading bar. Supports optional leading and trailing labels with three track sizes.

Basic

Pass a value between 0 and 100. Values outside this range are automatically clamped.

With labels

Use leadingLabel (left) and label (right) to add a header row above the track — useful for naming the skill and showing the percentage.

React30%

TypeScript65%

CSS90%

Sizes

Three track heights are available: sm, md (default), and lg.

md (default)

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { MasteryBar } from '@refraction-ui/react'

export function SkillProgress() {
  return (
    <div className="space-y-4">
      <MasteryBar value={30} leadingLabel="React" label="30%" />
      <MasteryBar value={65} leadingLabel="TypeScript" label="65%" />
      <MasteryBar value={90} leadingLabel="CSS" label="90%" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`number`	--	Progress value (0–100). Values outside this range are clamped.
`label`	`string`	--	Label shown on the right side of the header row.
`leadingLabel`	`string`	--	Label shown on the left side of the header row.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visual size (height) of the track.
`muted`	`boolean`	`false`	Renders the fill at reduced opacity for secondary/inactive states.
`className`	`string`	--	Additional CSS classes to apply to the wrapper.