Progress

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download progress -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Progress } from "@/components/ui/progress";
<Progress className="w-[300px]" value={33} max={100} />;

Examples

Default

import { Progress } from "@/components/ui/progress";
<Progress className="w-[300px]" value={33} />;

Values

import { Progress } from "@/components/ui/progress";
<div className="flex w-[300px] flex-col gap-4">
  <Progress value={0} />
  <Progress value={25} className="w-full" />
  <Progress value={50} />
  <Progress value={75} />
  <Progress value={100} />
</div>;

With Label

import { Field, FieldLabel } from "@/components/ui/field";
import { Progress } from "@/components/ui/progress";
<Field className="w-[300px]">
  <FieldLabel htmlFor="progress-upload">
    <span>Upload progress</span>
    <span className="ml-auto">66%</span>
  </FieldLabel>
  <Progress value={66} className="w-full" id="progress-upload" />
</Field>;

Controlled

import { Progress } from "@/components/ui/progress";
import { Slider } from "@/components/ui/slider";
import * as React from "react";
export default function ProgressExample() {
  const [value, setValue] = React.useState([50]);
  return (
    <div className="flex w-[300px] flex-col gap-4">
      <Progress value={value[0]} className="w-full" />
      <Slider
        value={value}
        onValueChange={(next) =>
          setValue(typeof next === "number" ? [next] : [...next])
        }
        min={0}
        max={100}
        step={1}
      />
    </div>
  );
}

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.