Progress

Progress is a horizontal bar that shows how far a task has completed.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/progress.tsx

Import from@viliha/vui-react/progress

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Drive it with a value from 0–100; the indicator animates on change.

progress-demo.tsx

import { Progress } from "@viliha/vui-react/progress";

export function Example() {
  return <Progress value={66} />;
}

Progress props

Plus everything React.ComponentProps<typeof ProgressPrimitive.Root> accepts, passed straight through to the underlying element.

Prop	Type	Default	What it does
label?	React.ReactNode	—	Text rendered inside the filled portion.