Chakra UI Steps
chakra-ui-steps makes it super easy to create multi-step interfaces in apps where you are already using chakra-ui. Use it in forms, onboarding, or anywhere you want to lead the user through some logical steps.
Installation
npm
npm install chakra-ui-stepsyarn
yarn add chakra-ui-stepsFeatures
- Horizontal and vertical layouts
- Extensible styling
- Right to left support
- Custom icons
- Multiple variants
- Easily render step content
Usage
In order to get started, you will need to extend your theme with the steps component's styles. This can be done by importing StepsTheme from chakra-ui-steps and passing it to the extendTheme function from Chakra UI.
Once you have extended the theme, you can use the Steps component anywhere in your app. Below is a basic example of how you might use the Steps component.
Custom Styles
To customize the styles of the Steps component, chakra-ui-steps provides a list of css classes for each part of the component. You can use these classes to override the default styles. Below is a list of the classes that are available.
In some cases you may want to customize the styles of a step based on its state. For example, you may want to change the color of a step when it is active. To do this, you can use the data attributes defined below.
Here is an example of how you might create some custom styles using a combination of the classes and data attributes.
To get up and running and have a look at some code, check out the examples page.
