# Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="progress-demo">
  <div className="flex w-full flex-col items-center justify-center gap-12 py-12 px-6">
    <div className="flex w-full max-w-md flex-col gap-2">
      <span className="text-xs font-mono text-muted-foreground">
        Default (h-1, square)
      </span>

      <Progress value="60" />
    </div>

    <div className="flex w-full max-w-md flex-col gap-6 border-t border-border/50 pt-8">
      <div className="flex flex-col gap-2">
        <span className="text-xs font-mono text-muted-foreground">
          Sizes (sm, md, lg)
        </span>

        <Progress value="25" size="sm" />
      </div>

      <Progress value="50" size="md" />

      <Progress value="75" size="lg" />
    </div>

    <div className="flex w-full max-w-md flex-col gap-6 border-t border-border/50 pt-8">
      <div className="flex flex-col gap-2">
        <span className="text-xs font-mono text-muted-foreground">
          Shape (Pill)
        </span>

        <Progress value="40" size="default" shape="pill" />
      </div>

      <Progress value="60" size="md" shape="pill" />

      <Progress value="80" size="lg" shape="pill" />
    </div>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/progress.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return <Progress value={33} />
}
```

## API Reference [#api-reference]

The component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Progress Documentation](https://www.radix-ui.com/docs/primitives/components/progress).

| Prop                 | Type                                | Default     | Description                                                                                    |
| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------- |
| `value`              | `number \| null`                    | `null`      | The progress value from `0` to `max`. Set to `null` for indeterminate state.                   |
| `max`                | `number`                            | `100`       | The maximum progress value.                                                                    |
| `size`               | `"default" \| "sm" \| "md" \| "lg"` | `"default"` | The height of the progress bar.                                                                |
| `shape`              | `"default" \| "pill"`               | `"default"` | The border radius shape of the progress bar.                                                   |
| `indicatorClassName` | `string`                            | -           | Additional CSS classes for the inner progress indicator element, useful for customizing color. |