Steps component designed to work seamlessly with Chakra UI. An interactive demo along with code examples can be viewed here.
- Multiple orientations
- Easily render step content
- Custom icons
- Size variants
Yarn:
yarn add chakra-ui-steps
NPM:
npm i chakra-ui-steps
NOTE: This v1.4.0 of this component requires @chakra-ui/react >= v1.6.7 to work correctly. You can follow the installation instructions here. If you aren't able to update your chakra version you can still use v1.3.0
In order to get started you will need to extend the default Chakra theme with the provided StepsTheme
object, like so:
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { StepsTheme as Steps } from "chakra-ui-steps";
const theme = extendTheme({
components: {
Steps,
},
});
export const App = () => {
return (
<ChakraProvider theme={theme}>
<YourApp />
</ChakraProvider>
);
};
Once that's done you should be good to go!
import { Step, Steps, useSteps } from "chakra-ui-steps";
const content = (
<Flex py={4}>
<LoremIpsum p={1} />
</Flex>
);
const steps = [
{ label: "Step 1", content },
{ label: "Step 2", content },
{ label: "Step 3", content },
];
export const StepsExample = () => {
const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
initialStep: 0,
});
return (
<Flex flexDir="column" width="100%">
<Steps activeStep={activeStep}>
{steps.map(({ label, content }) => (
<Step label={label} key={label}>
{content}
</Step>
))}
</Steps>
{activeStep === steps.length ? (
<Flex p={4}>
<Button mx="auto" size="sm" onClick={reset}>
Reset
</Button>
</Flex>
) : (
<Flex width="100%" justify="flex-end">
<Button
isDisabled={activeStep === 0}
mr={4}
onClick={prevStep}
size="sm"
variant="ghost"
>
Prev
</Button>
<Button size="sm" onClick={nextStep}>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</Flex>
)}
</Flex>
);
};
If you are upgrading to v2 of this component you will need to make the following changes:
StepsStyleConfig
has been renamed toStepsTheme
- so you will need to update the reference to this in your theme config:
- import { StepsStyleConfig as Steps } from 'chakra-ui-steps';
import { StepsTheme as Steps } from 'chakra-ui-steps';
The rest of the API remains the same.
If you would like to customize the appearance of the Steps component you can do so using the multi part component styling approach as described here. The parts available for styling are:
description;
icon;
iconLabel;
label;
labelContainer;
step;
stepContainer;
stepIconContainer;
steps;
The default styles for each part can be found here. Below is an example of how you might change the stroke width of the icons:
import { StepsTheme } from "chakra-ui-steps";
const CustomSteps = {
...StepsTheme,
baseStyle: (props) => {
return {
...StepsTheme.baseStyle(props),
icon: {
...StepsTheme.baseStyle(props).icon,
// your custom styles here
strokeWidth: "1px",
},
};
},
};
const theme = extendTheme({
components: {
Steps: CustomSteps,
},
});
Note: Both the
Step
andSteps
component extend the Chakra UIBox
component so they accept all the default styling props.
Prop | Type | Required | Description | Default |
---|---|---|---|---|
activeStep |
number | yes | Currently active step | 0 |
colorScheme |
string | no | Sets the color accent of the Steps component show | green |
orientation |
string | no | Sets the orientation of the Steps component | horizontal |
responsive |
boolean | no | Sets whether the component auto switches to vertical orientation on mobile | true |
checkIcon |
React.ComponentType | no | Allows you to provide a custom check icon | undefined |
onClickStep |
(step: number) => void | no | If defined, allows you to click on the step icons | undefined |
state |
'loading' | 'error' | no | Let's you set the state to error or loading | undefined |
Prop | Type | Required | Description | Default |
---|---|---|---|---|
label |
string | no | Sets the title of the step | '' |
description |
string | no | Provides extra info about the step | '' |
icon |
React.ComponentType | no | Custom icon to overwrite the default numerical indicator of the step | undefined |
isCompletedStep |
boolean | no | Individually control each step state, defaults to active step | undefined |
isKeepError |
boolean | no | Individually control if each step should keep showing the error state | undefined |
checkIcon |
React.ComponentType | no | Allows you to provide a custom check icon that will override the one provided to Steps | undefined |
state |
'loading' | 'error' | no | Let's you set the state in a specific Step, if defined it will override the one provided to Steps | undefined |