Steps component designed to work seamlessly with Chakra UI.All documentation and a variety of code examples can be viewed here.
[](https://www.npmjs.com/package/chakra-ui-steps)
[](https://bundlephobia.com/result?p=chakra-ui-steps)
[](https://bundlephobia.com/result?p=chakra-ui-steps)
[](https://www.npmjs.com/package/chakra-ui-steps)
[](https://www.npmjs.com/package/chakra-ui-steps)
## Installation
Yarn:
```bash
yarn add chakra-ui-steps
```
NPM:
```bash
npm i chakra-ui-steps
```
## Usage
In order to use the `Steps` component you will need to first extend the theme with the `StepsTheme` object. This can be done in your theme file:
```jsx
import { extendTheme } from '@chakra-ui/react';
import { StepsTheme as Steps } from 'chakra-ui-steps';
const theme = extendTheme({
components: {
Steps,
},
});
export default theme;
```
Then you can use the `Steps` component in your app:
```jsx
import { Steps, Step } from 'chakra-ui-steps';
const Example = () => {
const { nextStep, prevStep, reset, activeStep } = useSteps({
initialStep: 0,
});
return (
);
};
```
## Docs
For a full list of available props and examples of how to use the component, please visit the documentation site.
If you found this package useful, please consider leaving a star ⭐️ on the repo. Thanks!
## Upgrade guide
If you are upgrading to v2 of this component you will need to make the following changes:
- `StepsStyleConfig` has been renamed to `StepsTheme` - so you will need to update the reference to this in your theme config:
```diff
- import { StepsStyleConfig as Steps } from 'chakra-ui-steps';
+ import { StepsTheme as Steps } from 'chakra-ui-steps';
```
- Previously the `Steps` component accepted a `labelOrientation` prop, this has been removed in favor of the `circles-alt` variant. If you were using this prop you will need to update your code to use the variant instead:
```diff
-
+
```
The rest of the API remains the same.