Skip to content
codefastlabs

Command Palette

Search for a command to run...

Source
Feedback

Progress

Determinate progress bar. Pass value from 0 to max (100 by default). Colour via className on the indicator slot.

Examples

Controlled

A progress bar that can be controlled by a slider.

14 lines
import { Progress } from "@codefast/ui/progress";
import { Slider } from "@codefast/ui/slider";
import { useState } from "react";

export function ProgressControlled() {
  const [value, setValue] = useState([50]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Progress value={value[0]} />
      <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />
    </div>
  );
}

Label

Use a Field component to add a label to the progress bar.

14 lines
import { Field, FieldLabel } from "@codefast/ui/field";
import { Progress } from "@codefast/ui/progress";

export function ProgressWithLabel() {
  return (
    <Field className="w-full max-w-sm">
      <FieldLabel htmlFor="progress-upload">
        <span>Upload progress</span>
        <span className="ms-auto">66%</span>
      </FieldLabel>
      <Progress value={66} id="progress-upload" />
    </Field>
  );
}

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

56 lines
import { Field, FieldLabel } from "@codefast/ui/field";
import { Progress } from "@codefast/ui/progress";

import type { Translations } from "#features/components-catalog/components/detail/language";
import { useTranslation } from "#features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Upload progress",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "تقدم الرفع",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "התקדמות העלאה",
    },
  },
};

function toArabicNumerals(num: number): string {
  const arabicNumerals = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
  return num
    .toString()
    .split("")
    .map((digit) => arabicNumerals[parseInt(digit, 10)])
    .join("");
}

export function ProgressRtl() {
  const { dir, t, language } = useTranslation(translations, "ar");

  const formatNumber = (num: number): string => {
    if (language === "ar") {
      return toArabicNumerals(num);
    }
    return num.toString();
  };

  return (
    <Field className="w-full max-w-sm" dir={dir}>
      <FieldLabel htmlFor="progress-upload">
        <span>{t.label}</span>
        <span className="ms-auto">{formatNumber(66)}%</span>
      </FieldLabel>
      <Progress value={66} id="progress-upload" className="rtl:rotate-180" />
    </Field>
  );
}

Usage

The minimal import and composition — see Examples below for styled, real-world variants.

5 lines
import { Progress } from "@codefast/ui/progress";

export function ProgressUsage() {
  return <Progress value={60} />;
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Progress

Features

  • max (default 100) changes the denominator value is measured against — pass a non-100 max for domains like "3 of 5 steps."
  • Style the fill colour or gradient via **:data-[slot=progress-indicator] instead of overriding the root's background.
  • Built on Radix Progress — exposes role="progressbar" with aria-valuenow/valuemin/valuemax/valuetext for free.
  • value is clamped to 0–max, so the value announced is always the one the bar draws.

API reference

Props for each part of the component. All native element props are also forwarded.

Progress

A determinate progress bar built on Radix Progress.

valuenumber | null

Current progress from 0 to max. null marks indeterminate work and leaves out aria-valuenow.

Default0

maxnumber

Upper bound of value.

Default100

getValueLabel(value: number, max: number) => string

Builds the aria-valuetext announced for the value. Defaults to the rounded percentage.

classNamestring

Style the indicator via **:data-[slot=progress-indicator] to change its colour.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

  • Has role=progressbar with aria-valuenow / valuemin / valuemax / valuetext set for you.
  • Pair with a visible label or percentage — don’t rely on the bar alone.
  • For unknown-duration work, prefer a Spinner over a fake-moving bar.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Use for determinate tasks where you know the percentage.
  • Show the percentage or step count next to the bar.

Don’t

  • Don’t animate a bar with no real progress to fake activity.
  • Don’t use colour as the only signal of a critical threshold.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting StartedBrowse all components