How to Add a Progress Bar to a React App

Before installing Progress, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your styles, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. Progress imports nothing past React and the cn utility for class merging, so it is the smallest possible install — no peer components and no runtime package to version-lock. That also means it drops cleanly into an existing design system without pulling in a positioning or animation library.

Run the CLI from your project root to add the Progress source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single progress.tsx — no other files, because Progress has no peer dependencies beyond React and the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits.

Import Progress from your UI directory and pass a value between 0 and 100. The component computes the fill percentage and writes it to the inner <div>'s width, so <Progress value={65} /> renders a bar filled to sixty-five percent. Because Progress holds no state and calls no browser API, its source carries no 'use client' directive — you can render it straight inside a Server Component in a Next.js App Router page, or anywhere in a Vite app. Pass a max other than the default 100 when your value is a raw count rather than a percentage: value={3} max={5} fills the bar to sixty percent, and the component does the division for you. The bar is accessible out of the box because the track carries the role="progressbar" attribute plus aria-valuenow, aria-valuemin, and aria-valuemax.

When the value changes after the page paints — a real upload, a timed sequence, a form the user is filling in — the number lives in client state, so the component that owns it becomes the client component while Progress itself stays untouched. Mark that parent with 'use client', hold the value in React.useState, and pass it down as the value prop; each state change re-renders the bar and the fill eases to its new width over the built-in 300-millisecond transition. Progress needs no directive of its own because the client boundary belongs to whoever owns the state, not to the presentational bar. In production, replace the interval below with your real progress source — a fetch upload event, an XHR onprogress callback, or a step counter from a multi-step form.

Everything visual lives in one styles object at the top of the file you own, and it is only two entries. The outer track is styles.track — w-full h-2 bg-accent rounded-full overflow-hidden — a full-width two-pixel rail whose overflow-hidden keeps the rounded fill tucked inside it at every width. The inner fill is styles.bar — h-full bg-primary rounded-full plus transition-all duration-300 ease-out. Make the rail thicker by bumping h-2 to h-3 or h-4; square the ends by dropping rounded-full; or tint the fill by swapping bg-primary for bg-success or bg-destructive to signal state. Because both surfaces read Tailwind tokens — bg-accent for the track, bg-primary for the fill — changing them in theming re-themes every bar for dark and light mode at once. For copy-paste layouts and stateful patterns see the Progress examples.