# Progress

A determinate or indeterminate progress bar built on Base UI Progress, with label, value, track, and indicator primitives.

- Category: Data Display
- License: MIT
- Page: https://www.saasuji.com/components/progress
- Install: npx shadcn@latest add https://www.saasuji.com/r/progress.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value (Progress) | `number | null` | — | Current value between min and max; null renders an indeterminate progress bar. |
| min (Progress) | `number` | `0` | Minimum value of the range. |
| max (Progress) | `number` | `100` | Maximum value of the range. |
| format (Progress) | `Intl.NumberFormatOptions` | — | Options used to format the value for assistive technology. |
| locale (Progress) | `Intl.LocalesArgument` | — | Locale used when formatting the value; defaults to the runtime locale. |
| getAriaValueText (Progress) | `(formattedValue: string, value: number | null) => string` | — | Builds the human-readable text alternative for the current value. |
| className (all parts) | `string` | — | Additional classes merged onto the part that receives it. |
| children (ProgressLabel, ProgressValue, ProgressTrack, ProgressIndicator) | `React.ReactNode` | — | Label text, formatted value, and the track/indicator composition rendered inside those parts. |
| ...props (Progress, ProgressTrack, ProgressIndicator) | `ProgressPrimitive.Root.Props | ProgressPrimitive.Track.Props | ProgressPrimitive.Indicator.Props` | — | All remaining Base UI Progress props are forwarded (aria-valuetext, render, …). |
| ...props (ProgressLabel, ProgressValue) | `React.ComponentProps<"span">` | — | All remaining span attributes are forwarded. |

## Source

```tsx
"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: ProgressPrimitive.Root.Props) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      value={value}
      className={cn(
        "relative flex h-2 w-full items-center overflow-hidden rounded-full bg-secondary",
        className
      )}
      {...props}
    >
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </ProgressPrimitive.Root>
  )
}

function ProgressLabel({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="progress-label"
      className={cn("text-sm font-medium", className)}
      {...props}
    />
  )
}

function ProgressValue({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="progress-value"
      className={cn("text-sm text-muted-foreground tabular-nums", className)}
      {...props}
    />
  )
}

function ProgressTrack({
  className,
  ...props
}: ProgressPrimitive.Track.Props) {
  return (
    <ProgressPrimitive.Track
      data-slot="progress-track"
      className={cn("relative h-full w-full flex-1 overflow-hidden rounded-full bg-transparent", className)}
      {...props}
    />
  )
}

function ProgressIndicator({
  className,
  ...props
}: ProgressPrimitive.Indicator.Props) {
  return (
    <ProgressPrimitive.Indicator
      data-slot="progress-indicator"
      className={cn("h-full w-full flex-1 rounded-full bg-primary transition-all", className)}
      {...props}
    />
  )
}

export { Progress, ProgressLabel, ProgressValue, ProgressTrack, ProgressIndicator }

```