---
title: Progress
description: Displays the status of a task that takes a long time.

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

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

## Installation

<CodeTabs>

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

```bash
npx shadcn@latest add @coss/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: If you render children inside `Progress`, you must also include `ProgressTrack` and `ProgressIndicator` inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.

## API Reference

### Progress

Root component. Styled wrapper for `Progress.Root` from Base UI. When no children are provided, 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" />