Steps component designed to work seamlessly with Chakra UI
npm install chakra-ui-stepsSteps component designed to work seamlessly with Chakra UI. All documentation and a variety of code examples can be viewed here.





Yarn:
``bash`
yarn add chakra-ui-steps
NPM:
`bash`
npm i chakra-ui-steps
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.