Progress

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Pass a value and a name.

The bases differ for a label, a value text and classes:

• In Radix projects, Progress is the bar alone, and classes on it land on the bar. Put the label and the value in your own markup above it, point aria-labelledby at the label and mark the value text aria-hidden, as the Importing accounts example shows.
• In Base UI projects, put ProgressLabel and ProgressValue inside Progress. They sit in a row above the bar, and the label names it. ProgressValue shows "25%" on its own, or takes a function of that text, like {(text) => `${text} complete`}. The bar is a track inside Progress, so reach it with [&_[data-slot=progress-track]]:, as the Sizes example does.

The bar is slds-progress-bar and the fill is slds-progress-bar__value, as wide as the value. In Base UI projects, ProgressLabel and ProgressValue draw SLDS's labelled bar. SLDS's other heights and the circular bar aren't props: the Sizes example sets them with classes.

Known gaps:

• No vertical bar (slds-progress-bar_vertical) and no green value (slds-progress-bar__value_success).

• Name every bar: aria-label, or aria-labelledby pointing at a visible label. ProgressLabel does it where it exists.
• With value={null}, the bar is indeterminate: empty, with no aria-valuenow. Pass null while you don't know yet, not 0.
• Screen readers don't announce the value as it moves. Announce the end of a long task somewhere else, like a toast.

• The fill doesn't animate, so a change jumps to the new width.

• The bar fills its container's width. Put it in a container with a width, or use max-w-*.

• Pass value as a number from 0 to 100. A fraction like 0.25 draws a near-empty bar.
• Don't restyle the colors. They come from the theme.