chakra-ui-steps

chakra-ui-steps

Steps component designed to work seamlessly with Chakra UI. An interactive demo along with code examples can be viewed here.

Features

• Multiple orientations
• Easily render step content
• Custom icons
• Size variants

Installation

Yarn:

yarn add chakra-ui-steps

NPM:

npm i chakra-ui-steps

Usage

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 StepsStyleConfig object, like so:

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { StepsStyleConfig 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!

Basic Example

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>
  );
};

Custom Styles

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:

connector;
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 { StepsStyleConfig } from 'chakra-ui-steps';

const CustomSteps = {
  ...StepsStyleConfig,
  baseStyle: props => {
    return {
      ...StepsStyleConfig.baseStyle(props),
      icon: {
        ...StepsStyleConfig.baseStyle(props).icon,
        // your custom styles here
        strokeWidth: '1px',
      },
    };
  },
};

const theme = extendTheme({
  components: {
    Steps: CustomSteps,
  },
});

Props

Note: Both the Step and Steps component extend the Chakra UI Box component so they accept all the default styling props.

Steps

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	() => void	no	If defined, allows you to click on the step icons	undefined
labelOrientation	string	no	Switch between horizontal and vertical label orientation	undefined

Step

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