# @sikt/sds-progress-indicator

> ```sh npm i -s @sikt/sds-progress-indicator ```

Latest version **3.1.1** (published 2026-07-31) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @sikt/sds-progress-indicator
pnpm add @sikt/sds-progress-indicator
yarn add @sikt/sds-progress-indicator
bun add @sikt/sds-progress-indicator
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.1 |
| Published | 2026-07-31 |
| First published | 2023-08-24 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 42.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | vesve, andreassolberg, npmsiktctl |

## Links

- npm: https://www.npmjs.com/package/@sikt/sds-progress-indicator
- Repository: https://gitlab.sikt.no/designsystem/sds-komponentbibliotek
- Homepage: https://designsystem.sikt.no/
- npm.io page: https://npm.io/package/@sikt/sds-progress-indicator

## Dependencies (3)

- [@sikt/sds-core](https://npm.io/package/@sikt/sds-core.md) ^5.3.0
- [@sikt/sds-icons](https://npm.io/package/@sikt/sds-icons.md) ^4.2.0
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.3.3

## Recent versions

- 3.1.1 (latest) — 2026-07-31
- 3.1.0 — 2026-03-12
- 3.0.1 — 2025-10-09
- 3.0.0 — 2025-10-06
- 2.1.0 — 2025-05-21
- 2.0.2 — 2024-11-20
- 2.0.1 — 2024-09-09
- 2.0.0 — 2023-10-28
- 1.0.1 — 2023-09-26
- 1.0.0 — 2023-08-24

## README

# `@sikt/sds-progress-indicator`

## Consume

```sh
npm i -s @sikt/sds-progress-indicator
```

### React

The state of each `<ProgressStep>` component is set by the `currentIndex` prop on the `<ProgressIndicator>`.  
Actions can be added to a step with the child components `<ProgressStepButton>` and `<ProgressStepLink>`.

```js
import { ProgressIndicator, ProgressStep } from "@sikt/sds-progress-indicator";
import "@sikt/sds-progress-indicator/dist/index.css";

<ProgressIndicator currentIndex={0} heading="First step">
  <ProgressStep>
    <ProgressStepButton onClick={() => {}}>First step</ProgressStepButton>
  </ProgressStep>
  <ProgressStep>Second step</ProgressStep>
  <ProgressStep>Third step</ProgressStep>
  <ProgressStep>Fourth step</ProgressStep>
</ProgressIndicator>;
```

For use without details add the `count` prop and omit children.

```js
<ProgressIndicator currentIndex={0} count={4} heading="First step" />
```

### Stylesheets & custom markup

Import stylesheet:

```css
@import url("@sikt/sds-progress-indicator");
```

Create custom markup:

```html
<div class="sds-progress-indicator">...</div>
```

---
_Source: https://npm.io/package/@sikt/sds-progress-indicator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._