Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

With Label Above Progress for Ark UI

A progress bar at 45 percent with the label Uploading... above the track and no percentage beside it.

The words Uploading... sit above a bar at 45 percent. There is no percentage beside the label.

Name the task above the bar when the track alone would be unclear. Put the same words on a Button if the work is a single action with no meter. In React, Ark UI does not move the bar on its own.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Progress anatomy: root, label, value, track, indicator

Usage

<Progress className="w-full max-w-md gap-2" value={45}>
  <ProgressLabel>Uploading...</ProgressLabel>
</Progress>

FAQ

How does the label sit above the bar?

ProgressLabel is a child of Progress, and the track renders after the children at full width, so it wraps onto the next line. gap-2 is the space between them.

What names the bar?

ProgressLabel is visible text: Ark UI puts the progressbar role on the track and names it with the value text, 45%.

How do I change the label?

Change the children of ProgressLabel. Its type style comes from the theme's progress styles; add a className to change it.

How do I show the percentage too?

Add a ProgressValue after the label. It prints the value and sits at the end of the row, as With Percentage shows.

How do I update the 45?

Change value as the work advances. This demo passes a fixed 45. Always pass value: without one, Ark UI starts the bar at 50.

Does the label change the bar?

No. The fill is bg-primary and the track bg-muted, from the theme's progress styles. This demo adds no color class.

API Reference

Progress

Sets value={45}. The rest is on the Progress page.

All 20 progress examples