Progress

Progress bar and step tracker for multi-step flows and completion states.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Default 65%

65%

Success

100%

Warning

Step tracker

Account

2

Details

3

Payment

4

Confirm

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Progress, ProgressTracker } from "@payglocal_ui/flux-ui";

Example

{/* Linear progress bar */}
<Progress value={60} className="w-full" />

{/* Step tracker */}
<ProgressTracker
  steps={["Details", "Review", "Confirm"]}
  currentStep={1}
/>