Moduix component library

API Reference

Original primitive API

Behavior, accessibility details, and low-level props are documented by Base UI.

Basic

Export data

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";export function ProgressDemo() {  return (    <Progress value={24}>      <ProgressLabel>Export data</ProgressLabel>      <ProgressValue />    </Progress>  );}

Full list of component variables available for project-level overrides.

Property	Default	Description
--progress-color	var(--color-foreground)	Controls the default progress text color.
--progress-gap	0.5rem	Controls spacing between progress slots.
--progress-indicator-bg	var(--color-primary)	Controls indicator background color.
--progress-indicator-indeterminate-animation	progress-indeterminate 1.5s ease-in-out infinite	Controls indicator animation in indeterminate state.
--progress-indicator-indeterminate-width	35%	Controls indicator width in indeterminate state.
--progress-indicator-transition	var(--transition-default)	Controls indicator width transition.
--progress-label-color	var(--progress-color)	Controls label text color.
--progress-label-font-size	var(--text-sm)	Controls label font size.
--progress-label-font-weight	var(--weight-regular)	Controls label font weight.
--progress-label-line-height	var(--line-height-text-sm)	Controls label line height.
--progress-track-bg	var(--color-muted)	Controls track background color.
--progress-track-border-color	var(--color-border)	Controls track border color.
--progress-track-border-width	var(--border-width-sm)	Controls track border width.
--progress-track-height	0.5rem	Controls track height.
--progress-track-radius	var(--radius-full)	Controls track corner radius.
--progress-value-color	var(--progress-color)	Controls value text color.
--progress-value-font-size	var(--text-sm)	Controls value font size.
--progress-value-font-weight	var(--weight-regular)	Controls value font weight.
--progress-value-line-height	var(--line-height-text-sm)	Controls value line height.
--progress-width	12rem	Controls the root progress width.

Interactive variables scoped for docs preview without changing size scale tokens.

Property	Default	Description
--progress-color	var(--color-foreground)	Controls default text color.
--progress-indicator-bg	var(--color-primary)	Controls indicator color.
--progress-track-bg	var(--color-muted)	Controls track background.
--progress-track-border-color	var(--color-border)	Controls track border color.
--progress-track-height	0.5rem	Controls track height.
--progress-track-radius	var(--radius-full)	Controls track radius.

Anatomy

Progress groups the text label, formatted value, and visual bar for one long-running task. The bar structure is rendered automatically so consumers only compose the visible text slots.

Progress[value]
├─ ProgressLabel
├─ ProgressValue
└─ track
   └─ indicator

import { Progress, ProgressLabel, ProgressValue } from 'moduix';

export function ProgressDemo() {
  return (
    <Progress value={24}>
      <ProgressLabel>Export data</ProgressLabel>
      <ProgressValue />
    </Progress>
  );
}

Part	Role
`Progress`	Root state machine. Controls `value`, `min`, `max`, formatting, and accessible progress attributes.
`ProgressLabel`	Optional text label associated with the progress root.
`ProgressValue`	Optional formatted value text. It can render the default formatted value or use a child render function.
`track`	Internal visual rail rendered by `Progress`. Customize it with CSS variables or `classNames.track`.
`indicator`	Internal filled bar rendered inside the track. Customize it with CSS variables or `classNames.indicator`.

Progress does not expose ProgressTrack or ProgressIndicator in the public composition. Use the default internal bar for normal cases and reach for classNames only when slot-level track or indicator styling is needed.

Composition

Use value={null} for indeterminate work, or pass a number with optional min and max for known progress. locale, format, aria-valuetext, and getAriaValueText come from the root and keep the visual value and accessibility text aligned.

Style the root with className. Style the automatically rendered visual bar with CSS variables, or pass classNames={{ track, indicator }} when the track or indicator needs its own selector. ProgressLabel and ProgressValue remain regular visible slots and accept their own className and render props from Base UI.

Examples

Controlled

Keep the value in React state when progress mirrors another control, upload, export, or background task.

Upload status

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";import { useState } from "react";export function ControlledProgressDemo() {  const [value, setValue] = useState(45);  return (    <div>      <Progress value={value}>        <ProgressLabel>Upload status</ProgressLabel>        <ProgressValue />      </Progress>      <input        type="range"        min={0}        max={100}        value={value}        onChange={(event) => {          setValue(Number(event.target.value));        }}      />    </div>  );}

Min Max Range

Use min and max when the current value belongs to a custom range instead of the default 0 to 100.

Requests per minute

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";export function MinMaxRangeProgressDemo() {  return (    <Progress value={420} min={200} max={800}>      <ProgressLabel>Requests per minute</ProgressLabel>      <ProgressValue />    </Progress>  );}

Locale And Format

Use locale, format, and a custom ProgressValue child function to format progress text for users.

Storage usage

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";export function LocaleAndFormatProgressDemo() {  return (    <Progress value={0.64} min={0} max={1} locale="de-DE" format={{ style: "percent" }}>      <ProgressLabel>Storage usage</ProgressLabel>      <ProgressValue>{(formattedValue) => `${formattedValue} belegt`}</ProgressValue>    </Progress>  );}

Indeterminate

Pass value={null} when the task is running but the current completion percentage is unknown.

Preparing report

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";export function IndeterminateProgressDemo() {  return (    <Progress value={null}>      <ProgressLabel>Preparing report</ProgressLabel>      <ProgressValue>{() => "In progress"}</ProgressValue>    </Progress>  );}

Aria Value Text

Use aria-valuetext when the numeric value needs a more descriptive accessible label.

Onboarding

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";export function AriaValueTextProgressDemo() {  return (    <Progress value={3} min={0} max={5} aria-valuetext="Step 3 of 5 completed">      <ProgressLabel>Onboarding</ProgressLabel>      <ProgressValue>{() => "Step 3 of 5"}</ProgressValue>    </Progress>  );}

Custom Value Text

Use getAriaValueText with custom rendered value text when visual and accessible wording should stay aligned.

Migration

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";export function CustomValueTextProgressDemo() {  return (    <Progress      value={68}      getAriaValueText={(formattedValue) => `${formattedValue} of task completed`}    >      <ProgressLabel>Migration</ProgressLabel>      <ProgressValue>{(formattedValue) => `${formattedValue} done`}</ProgressValue>    </Progress>  );}

Custom Styles

Progress renders the track and indicator automatically. Use className for the root and classNames for the internal track or indicator slots.

Monthly export

import {  Progress,  ProgressLabel,  ProgressValue,} from "moduix";import styles from "./progress-demo.module.css";export function CustomStylingProgressDemo() {  return (    <Progress      value={72}      className={styles.customProgress}      classNames={{ track: styles.customTrack, indicator: styles.customIndicator }}    >      <ProgressLabel>Monthly export</ProgressLabel>      <ProgressValue />    </Progress>  );}

.customProgress {  --progress-width: 16rem;  --progress-track-height: 0.75rem;  --progress-track-bg: var(--color-accent);}.customTrack {  box-shadow: inset 0 0 0 var(--border-width-md)    color-mix(in oklab, var(--color-primary), transparent 75%);}.customIndicator {  background: linear-gradient(90deg, var(--color-primary), var(--color-chart-2));}

Progress

On this page