Progress

"use client"

import * as React from "react"

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/progress
Copy

Usage#

Copyimport { Progress } from "@/components/ui/progress"

Copy<Progress value={33} />

Composition#

CopyProgress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Examples#

Label#

Use ProgressLabel and ProgressValue to add a label and value display.

import {
  Progress,
  ProgressLabel as ProgressLabelComponent,

Variants#

variant picks the bar color from the theme's semantic set — useful for signalling that a task stalled, is retrying, or finished cleanly. The bar fills with bg-current, so any text-color utility in className works too.

import {
  Progress,
  ProgressLabel,

Controlled#

A progress bar that can be controlled by a slider.

"use client"

import * as React from "react"

An animated value#

ProgressValue takes a render function, so you can hand the reading to NumberCount and have the digits roll between readings instead of snapping. Base UI marks this part aria-hidden, so the animation is purely visual — the announced value still comes from the root — and NumberCount honours prefers-reduced-motion.

The render function only receives the formatted string and the raw number, so formatting is repeated on NumberCount rather than inherited from Progress. Mind the difference between the two: on a 0–100 scale use suffix="%"; format={{ style: "percent" }} is for a value that is already a 0–1 fraction, and would read 2400% here.

It is a function prop, so the component passing it has to be a Client Component.

"use client"

import * as React from "react"

Returning null for a null value keeps the indeterminate bar empty, which is what Base UI does by default.

API reference#

The component wraps Base UI Progress and accepts all of its props.

Passing value={null} marks the bar indeterminate. For the radial form of the same component, see ProgressRing.