# Progress

A progress bar whose fill is a pure function of a numeric value.

> 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).

## Installation

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

```bash
npx shadcn@latest add @framecn/progress
```

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

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

## Usage

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

```tsx
<Progress value={62} showLabel width={320} />
```

## Smooth transitions

The docs preview fills the bar from 0 → 62, stalls as if waiting on a slow operation, then resumes to 100 via `useProgressTransition`:

```tsx
import { Progress } from "@/components/framecn/progress";
import { useProgressTransition } from "@/components/framecn/use-progress-transition";

const progressStyle = useProgressTransition([
  { at: 0, value: 0 },
  { at: 40, value: 62, duration: 36 },
  { at: 130, value: 100, duration: 30 },
]);

<Progress style={progressStyle} showLabel width={320} />;
```

`style` takes precedence over `value` when both are provided.

## API Reference

### Progress

| Prop        | Type                    | Default                             |
| ----------- | ----------------------- | ----------------------------------- |
| `value`     | `number`                | `0`                                 |
| `style`     | `ProgressStyle`         | `-` (takes precedence over `value`) |
| `width`     | `number`                | `320`                               |
| `showLabel` | `boolean`               | `false`                             |
| `theme`     | `Partial<FramecnTheme>` | `-`                                 |
| `className` | `string`                | `-`                                 |