Progress

Determinate progress indicator.

stableBase UI Progress

Preview

Code

tsx

import { Progress } from "@/components/ui/progress";

export function Example() {
  return (
    <div className="space-y-3">
      <Progress value={30} />
      <Progress value={65} />
      <Progress value={92} />
    </div>
  );
}

Props

Prop	Type	Default	Description
value	`number`	—	Current value (0–100).
max	`number`	100	Maximum value.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Built on Base UI Progress. Determinate only — use Spinner for unknown durations.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/progress.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { Progress as BaseProgress } from "@base-ui-components/react/progress";
import type { ComponentPropsWithoutRef } from "react";

export function Progress({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof BaseProgress.Root>) {
  return (
    <BaseProgress.Root className={cn("relative w-full", className)} {...props}>
      <BaseProgress.Track className="h-2 w-full overflow-hidden rounded-full bg-bg-muted">
        <BaseProgress.Indicator className="h-full bg-accent transition-[width] duration-300 ease-out" />
      </BaseProgress.Track>
    </BaseProgress.Root>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmProgress (extends ProgressBar). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmProgress;

PrizmProgress()
PrizmProgress(double progress)

Prop	Type	Default	Description
progress	`DoubleProperty`	0.0	0.0–1.0; INDETERMINATE_PROGRESS (-1) renders the animated state.

Thin subclass of ProgressBar — muted track + accent fill, 8px tall, via the .prizm-progress rules. Mirrors components/ui/progress.tsx.