Skip to Content
FrontendBundlesComponentsUI PrimitivesProgress

Progress

A progress bar component built on Radix UI Progress primitive. Shows completion percentage for operations like file uploads or import jobs.

Import

import { Progress } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Progress";

Props

All Radix UI Progress props plus:

PropTypeRequiredDefaultDescription
valuenumber——Current value (0–100)
maxnumber—100Maximum value
colorstring——Tailwind color class for the bar

Usage

import { Progress } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Progress";
 
// Basic progress
<Progress value={65} />
 
// Import job progress
<div className="flex flex-col gap-2">
  <span className="text-sm text-muted-foreground">
    Importing... {imported}/{total} records
  </span>
  <Progress value={(imported / total) * 100} color="bg-blue-500" />
</div>
Last updated on
SkeletonTabs