@highlight-ui/progress-tracker

Using npm:

``bash
npm install @highlight-ui/progress-tracker
`

Using yarn:

`bash
yarn add @highlight-ui/progress-tracker
`

Using pnpm:

`bash
pnpm install @highlight-ui/progress-tracker
`

In your (S)CSS file:

`scss
@import url('@highlight-ui/progress-tracker');
`

Once the package is installed, you can import the library:

`ts
import { ProgressTracker } from '@highlight-ui/progress-tracker';
`

Usage

`tsx
import React from 'react';
import { ProgressTracker } from '@highlight-ui/progress-tracker';

export default function ProgressTrackerExample() {
return (
stepNames={[
'First step with a really, really long step name so you can trigger line wrapping ',
'Second step with not so long a name',
'Third step',
'Fourth',
]}
currentStepIndex={1}
/>
);
}
`

Props 📜

| Prop | Type | Required | Default | Description |
| :----------------- | :--------- | :------- | :------ | :--------------------------------------------------------------------------------------- |
| stepNames | string[] | Yes | | Specify the unique step names to display |
| currentStepIndex | number | Yes | | Specify the active step index. This updates the style for active and previous step names |
| className | string` | No | | Allows providing a custom classname |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.