chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI. All documentation and a variety of code examples can be viewed here.


!screenshot

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.