## Overview [#overview]
The `Progress` component shows completion for a task or operation. Use the linear progress component for standard flows, `ProgressCircle` for compact circular status, and `ProgressRadial` for gauge-style displays.
Progress tracks are surface-aware. The track lands four levels above its parent surface and the indicator uses the default brand fill.
## Usage [#usage]
```tsx
import {
Progress,
ProgressCircle,
ProgressRadial,
ProgressValue,
} from "@tilt-legal/cubitt-components/progress";
```
```tsx
```
## Examples [#examples]
### With Value [#with-value]
Show the formatted value under the linear progress track.
```tsx
"use client";
import { useEffect, useState } from "react";
import {
Progress,
ProgressValue,
} from "@tilt-legal/cubitt-components/progress";
export default function Example() {
const [progress, setProgress] = useState(13);
useEffect(() => {
const timer = setTimeout(() => {
setProgress(66);
}, 500);
return () => {
clearTimeout(timer);
};
}, []);
return (