---
title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
---

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/progress"

// The vanilla pendant of the demo's React state: 13 on load, 66 after 500ms.
templ ProgressDemo() {
	@progress.Progress(progress.Props{
		ID:    "progress-demo",
		Value: 13,
		Class: "w-[60%]",
	})
	<script nonce={ templ.GetNonce(ctx) }>
		(() => {
			const bar = document.getElementById("progress-demo");
			setTimeout(() => bar.setAttribute("aria-valuenow", "66"), 500);
		})();
	</script>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add progress
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

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

<ComponentSource name="progress" title="components/progress/progress.templ" />

<ComponentSource name="progress" title="components/progress/progress.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/progress"
```

```templ showLineNumbers
@progress.Progress(progress.Props{Value: 33})
```

## Composition

### With label and value

Use `progress.Label` and `progress.Value` to add a label and value display.

```templ showLineNumbers
@progress.Progress(progress.Props{Value: 56, Class: "w-full max-w-sm"}) {
	@progress.Label() {
		Upload progress
	}
	@progress.Value()
}
```

```text
progress.Progress
├── progress.Label
├── progress.Value
└── ProgressTrack
    └── ProgressIndicator
```

## Label

Use `progress.Label` and `progress.Value` to add a label and value display.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/progress"

templ ProgressWithLabel() {
	@progress.Progress(progress.Props{Value: 56, Class: "w-full max-w-sm"}) {
		@progress.Label() {
			Upload progress
		}
		@progress.Value()
	}
}
```

## Controlled

A progress bar that can be controlled by a slider.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/progress"
	"github.com/axadrn/shadcn-templ/v2/components/slider"
)

// The vanilla pendant of the demo's React state: the slider drives the bar.
templ ProgressControlled() {
	<div class="flex w-full max-w-sm flex-col gap-4" data-progress-controlled-demo>
		@progress.Progress(progress.Props{
			ID:    "progress-controlled",
			Value: 50,
			Class: "w-full",
		})
		@slider.Slider(slider.Props{
			Value: []float64{50},
			Min:    0,
			Max:    100,
			Step:   1,
		})
	</div>
	<script nonce={ templ.GetNonce(ctx) }>
		(() => {
			const demo = document.querySelector("[data-progress-controlled-demo]");
			demo.addEventListener("slider-change", (e) => {
				document.getElementById("progress-controlled").setAttribute("aria-valuenow", String(e.detail.values[0]));
			});
		})();
	</script>
}
```

## API Reference

### Progress

The `Progress` component renders the bar and exposes its state on `aria-valuenow`, updating the attribute moves the indicator.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Value` | `int`    | `0`     |
| `Max`   | `int`    | `100`   |
| `Class` | `string` | -       |

### ProgressLabel

The `progress.Label` component displays a label above the bar.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### ProgressValue

The `progress.Value` component displays the current value as a percentage.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |