A progress tracker for use in wizards
npm install @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';
`tsx
import React from 'react';
import { ProgressTracker } from '@highlight-ui/progress-tracker';
export default function ProgressTrackerExample() {
return (
'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}
/>
);
}
`
| 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 |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.