codefast/ui

Command Palette

Search for a command to run...

Source
Feedback

Progress

Determinate progress bar. Pass value 0–100. 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 * as React from "react";

export function ProgressControlled() {
  const [value, setValue] = React.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 for free.

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

Current progress from 0 to max.

Default0

maxnumber

Upper bound of value.

Default100

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 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