Progress

How far a task has gone, with an optional label and value. The track is bordered in Iwa.

Installation

npx rasengan-ui add progress

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/progress.json

Usage

import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress";
 
export function Upload({ value }: { value: number }) {
  return (
    <Progress value={value} className="w-72">
      <ProgressLabel>Uploading</ProgressLabel>
      <ProgressValue />
    </Progress>
  );
}

Indeterminate

value={null} when the end can't be known yet.

Variants and tones

default draws the bar on a grey track; soft draws its track as a wash of the bar's own tone, for a quieter bar. tone colours the bar: primary by default, success for a finished task, warning for a quota running out. sm, default and lg set the track's height.

<Progress variant="soft" tone="success" size="sm" value={100} aria-label="Deployed" />

Villages

The track is muted with --track-border, the indicator the nature's primary; its width animates with the village's motion.

Accessibility

• A progressbar with aria-valuenow, named by ProgressLabel; ProgressValue shows the formatted value.

API reference

The parts of Base UI's Progress:

progressVariants({ variant, tone, size }) returns the root's classes.