---
title: Progress
description: A bar that visualizes the completion status of an operation.

links:
  doc: https://base-ui.com/react/components/progress#api-reference
---

## Preview

<ComponentPreview name="p-progress-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx @olyx/cli@latest add progress
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="progress" title="components/ui/progress.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
```

```tsx
<Progress value={40} />
```

Note: When no children are provided, a default track and indicator are rendered for you. If you render children inside `Progress` (e.g. `ProgressLabel`, `ProgressValue`), the track and indicator are still included automatically.

## API Reference

### Progress

Root component. Styled wrapper for `Progress.Root` from Base UI. Automatically renders a track and indicator.

### ProgressTrack

Track container for the progress indicator. Styled wrapper for `Progress.Track` from Base UI.

### ProgressIndicator

Visual indicator showing the current progress. Styled wrapper for `Progress.Indicator` from Base UI.

### ProgressLabel

Label text for the progress bar. Styled wrapper for `Progress.Label` from Base UI.

### ProgressValue

Displays the current value. Styled wrapper for `Progress.Value` from Base UI.

## Examples

### With Label and Value

<ComponentPreview name="p-progress-2" />

### With Formatted Value

<ComponentPreview name="p-progress-3" />