# Progress

> Determinate progress and capacity bars.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/progress.json`

## Install

```tsx
import { Progress } from "@aspyn-io/kit";
```

### Basic

```tsx
<Progress value={62} aria-label="Upload progress" />
```

### With a value label

Compose a label and percentage above the bar.

```tsx
const [value, setValue] = React.useState(40);

<div className="flex justify-between text-sm">
  <span>Uploading…</span>
  <span>{value}%</span>
</div>
<Progress value={value} aria-label="Upload progress" />
```

## Notes

- Inherited from shadcn/ui (Radix Progress). Announces progress to assistive tech; always provide an accessible name.
- To recolor the indicator, target it with a className selector, e.g. [&_[data-slot=progress-indicator]]:bg-chart-1.