Components — Modern React UI Library

Examples

Basic Progress Bar

A simple progress bar showing 50% completion with custom styling.

61 %

"use client";
import { Progress } from "@g4rcez/components";

function BasicProgressBar() {
  return (
    <Progress value={50} className="bg-primary" container="h-4 text-sm" />
  );
}

Custom Range

Width is computed from value relative to min/max — here 75 inside [-100, 100] renders at 88%.

88 %

"use client";
import { Progress } from "@g4rcez/components";

function RangedProgressBar() {
  return <Progress min={-100} max={100} value={75} container="h-4 text-sm" />;
}

When to use Progress

Use when

You need the documented Progress interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Progress behavior you need.

Accessibility

Keep the Progress labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.